🧠 Second Brain
Search
Mermaid
JavaScript-based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically.
Generate images like below with just text:
Making it git and collaboration ready.
A simple example you can see inDAG.
# Configs
TD
orTB
: This declares the flowchart is oriented from top to bottomLR
: Horizontal
More on About Mermaid.
# Charts
- Flowchart
- Sequence Diagram
- Class Diagram
- State Diagram
- Entity Relationship Diagram
- User Journey
- Gantt
- Pie Chart
- Quadrant Chart
- Requirement Diagram
- Gitgraph (Git) Diagram
- C4 Diagram 🦺⚠️
- Mindmaps
- Timeline
- Zenuml
- Sankey
- XYChart 🔥
- Block Diagram 🔥
- Other Examples
# Bar chart
gantt title Gantt Chart with Mermaid dateFormat X axisFormat %s section Apple Apple : 0, 100 section Bananas 75 : 0, 75 section Oranges 150 : 0, 150
gantt title Gantt Chart with Mermaid dateFormat X axisFormat %s Apple : 0, 100 Bananas : 0, 75 Oranges : 0, 150
Origin:
References: