Visualizing complex flows with diagrams keeps documentation clear. With Mermaid.js, you can render diagrams directly inside your Markdown files using simple text.
1. Flowchart Example
To create a flowchart, use a mermaid code block. Specify the layout direction (TD for Top-Down, LR for Left-to-Right) and declare nodes with connections.
graph TD
A[Start] --> B(Write Markdown)
B --> C{Need Diagram?}
C -- Yes --> D[Use Mermaid.js]
C -- No --> E[Standard Text]
D --> F[Export PDF]
E --> F
2. Sequence Diagram Example
Sequence diagrams represent interactions between different actors or systems over time.
sequenceDiagram
participant User
participant Browser
participant API
User->>Browser: Click Export PDF
Browser->>API: Send Markdown payload
API-->>Browser: Return raw PDF Blob
Browser->>User: Trigger download file
3. Gantt Chart Example
Use Gantt charts inside your Markdown project files to track milestones, tasks, and schedules.
gantt
title Documentation Project Roadmap
dateFormat YYYY-MM-DD
section Planning
Write outline :a1, 2025-06-01, 3d
Review with team :after a1 , 2d
section Writing
Draft contents :2025-06-06 , 5d
Render diagrams :2025-06-09 , 3d
Why Use Text-Based Diagrams?
- Version Control: Unlike image files, text diagrams show clear diffs in Git.
- Easy Updates: Change a label or path in text in seconds rather than opening drawing software.
- Responsive Styling: Diagrams adjust automatically to document styling (like light/dark modes).
Rendering Mermaid Diagrams Instantly
Our online Markdown editor and Markdown to PDF converter support full Mermaid.js parsing. Type your code block and preview the rendered diagram live.