Skip to main content

Tabs & Mermaid Diagram

What kind of data do you have?

From Data to Visualization leads you to the most appropriate graph for your data. Pick the main type using the buttons below. Then let the decision tree guide you toward your graphic possibilities.

Numeric features/variables 📚

Diagrams

Diagrams can be rendered using Mermaid in a code block.

Installation​

npm install --save @docusaurus/theme-mermaid

Enable Mermaid functionality by adding plugin @docusaurus/theme-mermaid and setting markdown.mermaid to true in your docusaurus.config.js.

docusaurus.config.js
export default {
  markdown: {
    mermaid: true,
  },
  themes: ['@docusaurus/theme-mermaid'],
};

Usage​

Add a code block with language mermaid:

Example Mermaid diagram
```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```

1. Flow Chart:

2.Sequence Diagram:

3.State Diagram:

4.Entity Relationship Diagrams:

5. User Journey:

5. XY Chart:

7. Mind map:

See the Mermaid syntax documentation for more information on the Mermaid syntax.

Theming​

The diagram dark and light themes can be changed by setting mermaid.theme values in the themeConfig in your docusaurus.config.js. You can set themes for both light and dark mode.

docusaurus.config.js
export default {
  themeConfig: {
    mermaid: {
      theme: {light: 'neutral', dark: 'forest'},
    },
  },
};

See the Mermaid theme documentation for more information on theming Mermaid diagrams.