Create diagrams and visualizations in Markdown using Mermaid, Graphviz, Vega-Lite, PlantUML, infographics, JSON Canvas, architecture diagrams, and info cards. Use when asked to create any diagram, chart, visualization, or visual documentation.
Create professional diagrams and visualizations in Markdown documents. Choose the right tool for the job, then read the detailed reference for that tool.
What are you trying to create?
| Need | Tool | Code Fence | Reference |
|---|---|---|---|
| Flowchart, sequence diagram, state machine, class diagram, mindmap | Mermaid | ```mermaid | mermaid.md |
| Dependency tree, call graph, module relationships, complex directed graphs | Graphviz | ```dot | graphviz.md |
| Bar chart, line chart, scatter plot, heatmap, data-driven visualization | Vega-Lite | ```vega-lite | vega.md |
| UML diagrams with icons (9,500+ stencils) | PlantUML | ```plantuml | plantuml.md |
| Cloud architecture (AWS/Azure/GCP/K8s) | PlantUML | ```plantuml | plantuml.md |
| Network topology, security architecture | PlantUML | ```plantuml | plantuml.md |
| KPI cards, timelines, roadmaps, funnels, SWOT, org charts, pie/bar charts | Infographic | ```infographic | infographic.md |
| Mind map, knowledge graph, spatial planning board | JSON Canvas | ```canvas | canvas.md |
| Layered system architecture, microservices, enterprise diagrams | Architecture | Raw HTML | architecture.md |
| Editorial info cards, data highlights, knowledge summaries | Infocard | Raw HTML | infocard.md |
@startuml and end with @enduml```text for any diagram type - it won't render