CmdocsComponents
Mermaid
Render flowcharts, sequence diagrams, and more from text.
Mermaid
Render interactive diagrams using Mermaid syntax. Just use a mermaid code block and cmdocs will render it as an SVG diagram.
Flowchart
```mermaid
graph TD;
A[Write MDX] --> B[Push to GitHub];
B --> C{Webhook};
C --> D[Build Pipeline];
D --> E[Static Export];
E --> F[Deploy to CDN];
```Sequence Diagram
```mermaid
sequenceDiagram
participant User
participant Dashboard
participant API
participant Builder
User->>Dashboard: Push to GitHub
Dashboard->>API: Webhook received
API->>Builder: Trigger build
Builder->>API: Upload artifacts
API-->>User: Site deployed!
```Class Diagram
```mermaid
classDiagram
class DocsConfig {
+string name
+ThemeConfig theme
+Navigation navigation
}
DocsConfig --> ThemeConfig
DocsConfig --> Navigation
```Notes
- Mermaid diagrams automatically adapt to light and dark themes.
- You can use any Mermaid diagram type — flowcharts, sequence diagrams, class diagrams, state diagrams, pie charts, Gantt charts, and more.
- Diagrams are rendered client-side as SVGs.
How is this guide?