{
  "$type": "site.standard.document",
  "bskyPostRef": {
    "cid": "bafyreib3aqes545jzkgxks4orisx5g5f6nkw3jyceendbfihs37cd4j6ay",
    "uri": "at://did:plc:j4nmy4ymoeorm3j6hzbijapg/app.bsky.feed.post/3lx55ditm42g2"
  },
  "coverImage": {
    "$type": "blob",
    "ref": {
      "$link": "bafkreigy6mqwlpvgjwxdogghteabqmm5ecfdcqvcyiicsjdymkin6gjds4"
    },
    "mimeType": "image/jpeg",
    "size": 432792
  },
  "description": "Image generation is messy for structure. With Mermaid + LLMs, diagrams become clear, tweakable, and practical. A real tool for strategy and logic.",
  "path": "/mermaid/",
  "publishedAt": "2025-08-24T07:48:38.000Z",
  "site": "https://hoeijmakers.net",
  "tags": [
    "MermaidCreate diagrams and visualizations using text and code.Try Editor",
    "Mermaid Chart",
    "Mermaid ChartA smarter way of creating diagrams.Create complex, visual diagrams with text. A smarter way of creating diagrams.",
    "From text to diagrams: working with Mermaid",
    "GPT Image 2 Changed My Mind on AI Visuals"
  ],
  "textContent": "In my work as a **digital and AI strategist** , I spend a lot of time analysing complex information: policies, processes, data flows, client interactions. The challenge is not just understanding it myself, but making sure everyone around the table sees the same structure.\n\nVisualisation helps. A **flowchart** can clarify a process, a **sequence diagram** can capture how systems interact, and a **classification chart** can sort concepts into clear categories.\n\nThese diagrams act as shortcuts: they reduce ambiguity, improve communication with clients, and give implementers a clearer sense of the logic behind a system.\n\nMermaidCreate diagrams and visualizations using text and code.Try Editor\n\n## Why not image generation?\n\nAI image generation is impressive when you need something atmospheric or loosely structured. But when it comes to precision, diagrams, tables, graphs, I’ve found it messy and impractical.\n\nThe results look nice but are hard to adapt, impossible to maintain, and too fragile for real collaboration.\n\n## Why Mermaid works\n\nWith Mermaid the process shifts. Instead of drawing shapes directly, you capture the logic in text, and the rendering engine produces clean, consistent visuals that can be refined with minimal effort.\n\nWhen paired with a large language model, whether ChatGPT or the AI module in MermaidChart, the step from natural language to exact structure becomes almost seamless. What once demanded technical fluency now feels like a conversational act, bringing precision within reach of anyone working with ideas.\n\nThis makes the work both **highly functional** and surprisingly **enjoyable**. It feels like craftsmanship. The way a carpenter shapes wood, first understanding its grain and potential, then turning it into something precise and useful, Mermaid allows me to take a rough idea and refine it into a clear, structured form.\n\nThe textual script on the left, visual output on the right.\n\n## Tools that fit\n\nIt might only be a matter of time before LLMs integrate something like Mermaid directly. Perhaps it’s already happening. But I like having a dedicated tool for it, and I personally use Mermaid Chart, which I can warmly recommend.\n\nIt’s lightweight, focused, and gets out of the way so I can focus on the thinking.\n\n💡\n\nMermaid diagrams are now integrated in tools like Notion, Obsidian, and GitHub. Instead of switching between separate apps, you can write the logic in plain text and have it instantly rendered as a clear diagram. This creates a smoother workflow: ideas, structures, and visualisations live in the same environment where you also take notes and collaborate.\n\n## Closing thought\n\nFor me, this combination bridges the gap between **concept and precision**. It clears the mind, sharpens the idea, and leaves me with something that both I and my clients can rely on. And that, in the world of digital strategy and AI, is worth a lot.\n\nI demo Mermaid as GPT and as application (with AI)\n\n* * *\n\nMermaid ChartA smarter way of creating diagrams.Create complex, visual diagrams with text. A smarter way of creating diagrams.\n\n### Example mermaid script as seen on screenshot\n\n\n    ---\n    config:\n      theme: redux\n      look: neo\n    ---\n    stateDiagram-v2\n        [*] --> CartCreated\n        CartCreated --> CheckoutStarted : User proceeds to checkout\n        CheckoutStarted --> PaymentPending : Payment initiated\n        PaymentPending --> PaymentFailed : Payment error\n        PaymentFailed --> CheckoutStarted : Retry checkout\n        PaymentPending --> PaymentSuccessful : Payment confirmed\n        PaymentSuccessful --> OrderPlaced\n        OrderPlaced --> Packed : Warehouse starts packing\n        Packed --> Shipped : Courier picked up\n        Shipped --> OutForDelivery : Last-mile transit\n        OutForDelivery --> Delivered : User receives package\n        OrderPlaced --> Cancelled : User cancels\n        Packed --> ReturnInitiated : User requests return\n        Delivered --> ReturnInitiated : Return requested after delivery\n        ReturnInitiated --> Returned : Item received back\n        Returned --> Refunded : Refund processed\n        Shipped --> DeliveryFailed : Address issue / no contact\n        DeliveryFailed --> ReturnInitiated\n        Delivered --> [*]\n        Refunded --> [*]\n        Cancelled --> [*]\n\n\n### Further reading\n\n  * From text to diagrams: working with Mermaid\n  * GPT Image 2 Changed My Mind on AI Visuals\n\n",
  "title": "From Ideas to Precision: Why I Use Mermaid with LLMs",
  "updatedAt": "2026-05-10T08:53:53.513Z"
}