Simon Willison recently highlighted a handy trick: ask Grok to output Mermaid diagram code, then render it in a viewer for crisp, shareable visuals (source). Here’s a streamlined workflow you can use today.
Why Mermaid + LLMs work
- Diagrams as code: easy to version, diff, and review in PRs.
- Fast iteration: edit text, not pixels.
- Portable: works across docs, wikis, and static sites.
Copy‑paste prompt to start
“You are a senior systems analyst. Create a Mermaid [diagram type: flowchart | sequenceDiagram | classDiagram | erDiagram | stateDiagram] that documents [scope]. Use clear labels, group related nodes with subgraphs where helpful, and keep under 15 nodes. Output only a single fenced code block with the mermaid language tag—no prose.”
Quick iteration loop
- Ask Grok for Mermaid code using the prompt above.
- Paste the result into the official Mermaid Live Editor to render.
- Refine: “Rename nodes for clarity,” “Add failure path,” or “Limit to 10 steps.”
- Repeat until labels, edges, and hierarchy match reality.
- Export SVG/PNG or commit the .mmd snippet to your repo.
Common patterns that work well
- Flowcharts for system overviews: start/end, conditionals, and subprocesses.
- sequenceDiagram for API calls, retries, and timeouts.
- erDiagram for data modeling between services.
- stateDiagram for lifecycle rules and edge cases.
- Gantt for delivery timelines and dependencies.
Render it safely
Even if your chat UI doesn’t render Mermaid, you’re fine—just copy the code and use the Mermaid Live Editor. For syntax details and advanced features (subgraphs, themes, callouts), see the official Mermaid documentation.
Caveats
LLMs can invent edges or omit constraints. Validate with a subject-matter expert before sharing. Keep diagrams small and focused; split complex systems into separate views. When something looks off, ask Grok to justify each node and edge, then prune.
Takeaway
Grok + Mermaid turns messy discussions into precise, reviewable diagrams in minutes. Prompt for code, iterate quickly, and render via Mermaid Live for clean results.
Enjoy this nugget? Get one actionable AI tip in your inbox—subscribe to our newsletter: theainuggets.com/newsletter
