[{"data":1,"prerenderedAt":218},["ShallowReactive",2],{"/2025/09/15-diagram-as-a-code-using-mermaid":3},{"id":4,"title":5,"body":6,"date":209,"description":66,"extension":210,"meta":211,"navigation":212,"path":213,"robots":214,"seo":215,"stem":216,"__hash__":217},"posts/2025/09/15 diagram-as-a-code-using-mermaid.md","15 Diagram As A Code Using Mermaid",{"type":7,"value":8,"toc":204},"minimark",[9,18,21,25,27,30,32,40,53,67,70,72,83,85,91,94,102,104,115,117,128,136,138,146,154,156,163,171,173,176,184,187,193,195],[10,11,13],"post-title",{":date":12},"date",[14,15,17],"h1",{"id":16},"diagram-as-a-code-using-mermaid","Diagram as a Code Using Mermaid",[19,20],"br",{},[22,23,24],"p",{},"Today I need to visualize a data flow using diagram. I started with my go-to tools, Draw.io. It's quickly getting complicated. I need to move elements around, ensure the arrows are still correct, update the formatting, and soon I can see it taking a lot of time.",[19,26],{},[22,28,29],{},"I decided to use a different approach. In KCDC, there's a session about diagram and I remember the tool is Mermaid, so I decided to learn it. And within minutes, I'm able to create very dynamic sequence diagram and entity relation diagram in markdown file.",[19,31],{},[33,34,35],"section-title",{},[36,37,39],"h2",{"id":38},"with-mermaid-plugin-in-vs-code","With Mermaid Plugin in VS Code",[22,41,42,43,52],{},"This is how I originally have it. Basically install ",[44,45,51],"a",{"href":46,"rel":47,"className":49},"https://marketplace.visualstudio.com/items?itemName=MermaidChart.vscode-mermaid-chart",[48],"nofollow",[50],"text-blue-600","Mermaid plugin for VS Code",". Then on the markdown, add the following text:",[54,55,56],"code-block",{},[57,58,63],"pre",{"className":59,"code":61,"language":62},[60],"language-text","```mermaid\nsequenceDiagram\n    participant user as User\n    participant web as Web UI\n    participant api as API\n    user->>web: GET /\n    web->>user: return &lt;html&gt;\n    user-->>api: GET /api/resource\n    api-->>user: return {json}\n```\n","text",[64,65,61],"code",{"__ignoreMap":66},"",[22,68,69],{},"Show preview on VS Code and the diagram will be rendered.",[19,71],{},[22,73,74,75],{},"For more information:\n",[76,77,79],"span",{"className":78},[50],[44,80,81],{"href":81,"rel":82},"https://www.mermaidchart.com/",[48],[19,84],{},[33,86,87],{},[36,88,90],{"id":89},"in-nuxt-content-markdown-using-npm-package","In Nuxt Content Markdown using NPM Package",[22,92,93],{},"For the purpose of showing the diagram in this blog, I had to approach it differently as it will be rendered as html. Instead of plugin, I installed the npm package.",[54,95,96],{},[57,97,100],{"className":98,"code":99,"language":62},[60],"yarn add mermaid\n",[64,101,99],{"__ignoreMap":66},[19,103],{},[22,105,106,107,114],{},"It actual does server side rendering, but since I'm not going to have a server, I need a client side rendering. Good thing is there's a workaround: ",[76,108,110],{"className":109},[50],[44,111,112],{"href":112,"rel":113},"https://github.com/nuxt/content/issues/1866",[48],". Thank to all the folks that contribute to the solutions!",[19,116],{},[22,118,119,120,127],{},"First, we need to create a client side plugin under ",[64,121,126],{"className":122},[123,124,125],"bg-gray-200","p-2","rounded","\u003Capp>/plugins/mermaid.client.ts"," with the following content:",[54,129,130],{},[57,131,134],{"className":132,"code":133,"language":62},[60],"import mermaid from 'mermaid'\n\nexport default defineNuxtPlugin((nuxtApp) => {\n  nuxtApp.provide('mermaid', () => mermaid)\n})\n",[64,135,133],{"__ignoreMap":66},[19,137],{},[22,139,140,141,145],{},"Next, we need a custom component, let say ",[64,142,144],{"className":143},[123,124,125],"\u003Capp>/components/mermaid.vue",":",[54,147,148],{},[57,149,152],{"className":150,"code":151,"language":62},[60],"\u003Cscript setup lang=\"ts\">\n  const { $mermaid } = useNuxtApp();\n  const mermaidContainer = ref\u003CHTMLPreElement | null>(null)\n\n  onMounted(async () => {\n    const { $mermaid } = useNuxtApp();\n  const mermaidContainer = ref\u003CHTMLPreElement | null>(null)\n\n  onMounted(async () => {\n    if (mermaidContainer.value?.textContent) {\n      await nextTick()\n      try {\n        $mermaid().initialize({ startOnLoad: false, theme: 'default' })\n        await $mermaid().run({\n          nodes: [mermaidContainer.value],\n        })\n      }\n      catch (e) {\n        console.error('Error running Mermaid:', e)\n        mermaidContainer.value.innerHTML = '⚠️ Mermaid Chart Syntax Error'\n      }\n    }\n  })\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cpre ref=\"mermaidContainer\" class=\"mermaid\">\n    \u003Cslot mdc-unwrap=\"p\" />\n  \u003C/pre>\n\u003C/template>\n",[64,153,151],{"__ignoreMap":66},[19,155],{},[22,157,158,159,145],{},"Then, add a type to make typescript happy at ",[64,160,162],{"className":161},[123,124,125],"\u003Capp>/types/mermaid.d.ts",[54,164,165],{},[57,166,169],{"className":167,"code":168,"language":62},[60],"import type { mermaid } from 'mermaid'\n\ndeclare module '#app' {\n  interface NuxtApp {\n    $mermaid: () => mermaid\n  }\n}\n\nexport {}\n",[64,170,168],{"__ignoreMap":66},[19,172],{},[22,174,175],{},"Finally, on the markdown:",[54,177,178],{},[57,179,182],{"className":180,"code":181,"language":62},[60],"\n::mermaid\nsequenceDiagram\n    participant user as User\n    participant web as Web UI\n    participant api as API\n    user->>web: GET /\n    web->>user: return \u003Chtml>\n    user-->>api: GET /api/resource\n    api-->>user: return {json}\n::\n\n",[64,183,181],{"__ignoreMap":66},[22,185,186],{},"which renders the diagram:",[188,189,190],"mermaid-block",{},[22,191,192],{},"sequenceDiagram\nparticipant user as User\nparticipant web as Web UI\nparticipant api as API\nuser->>web: GET /\nweb->>user: return \nuser-->>api: GET /api/resource\napi-->>user: return {json}",[19,194],{},[22,196,74,197],{},[76,198,200],{"className":199},[50],[44,201,202],{"href":202,"rel":203},"https://mermaid.js.org/",[48],{"title":66,"searchDepth":205,"depth":205,"links":206},2,[207,208],{"id":38,"depth":205,"text":39},{"id":89,"depth":205,"text":90},"2025-09-15T00:00:00.000Z","md",{},true,"/2025/09/15-diagram-as-a-code-using-mermaid",null,{"title":5,"description":66},"2025/09/15 diagram-as-a-code-using-mermaid","P8GviHdSZCJRiy0JWAs9t7zaldXAGJMNoWxI4ez-GWs",1785167453157]