Modern Web-Browsers and many Markdown-Editors do support this.
Example:
Code: Select all
---
config:
layout: elk
---
flowchart TB
F["1. Flowchart"]
S["2. Sequence diagram"]
ST["3. State diagram"]
C["4. Class diagram"]
ER["5. Entity relationship diagram"]
G["6. Gantt chart"]
GG["7. Git graph"]
P["8. Pie chart"]
T["9. Timeline"]
U["10. User journey"]
M["11. Mindmap"]
Q["12. Quadrant chart"]
XY["13. XY chart"]
R["14. Requirement diagram"]
C4["15. C4 diagram"]
A["16. Architecture diagram"]
B["17. Block diagram"]
K["18. Kanban"]
PK["19. Packet diagram"]
SK["20. Sankey diagram"]
F --> S --> ST --> C --> ER --> G --> GG --> P --> T --> U --> M --> Q --> XY --> R --> C4 --> A --> B --> K --> PK --> SK
classDef indigo fill:#eef2ff,stroke:#818cf8,color:#111827
classDef teal fill:#f0fdfa,stroke:#2dd4bf,color:#111827
classDef violet fill:#f5f3ff,stroke:#a78bfa,color:#111827
classDef orange fill:#fff7ed,stroke:#fb923c,color:#111827
classDef green fill:#f0fdf4,stroke:#4ade80,color:#111827
class F,S,ST,C indigo
class ER,G,GG,P teal
class T,U,M,Q violet
class XY,R,C4,A orange
class B,K,PK,SK green
