Project: ITK Dev Design System

Diagrams

Mermaid is wired into VitePress via vitepress-plugin-mermaid. Use it inside any research project's Markdown for flowcharts, sequence diagrams, gantt charts, and more.

Tip

Diagrams live in Markdown, not in prototypes. For interactive charts inside mock HTML files, see Data viz.

Flowchart

Sequence diagram

State diagram

Gantt

Pie

ER diagram

Theming

Mermaid respects VitePress's light/dark mode automatically. For per-diagram tweaks, start the code block with %%{init: ...}%%:

```mermaid
%%{init: { "theme": "base", "themeVariables": {
  "primaryColor": "#007ba6",
  "primaryTextColor": "#fff",
  "lineColor": "#495057"
}}}%%
flowchart LR
  A --> B
```