{"id":49566,"date":"2025-06-01T13:16:03","date_gmt":"2025-06-01T13:16:03","guid":{"rendered":"https:\/\/www.devopsschool.com\/blog\/?p=49566"},"modified":"2026-02-21T07:29:09","modified_gmt":"2026-02-21T07:29:09","slug":"mermaid-js-make-graph-charts-using-code-what-why-and-how","status":"publish","type":"post","link":"https:\/\/www.devopsschool.com\/blog\/mermaid-js-make-graph-charts-using-code-what-why-and-how\/","title":{"rendered":"Mermaid.js &#8211; Make graph &amp; charts using code: What, Why, and How"},"content":{"rendered":"\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1024\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2025\/06\/Mermaid.png\" alt=\"\" class=\"wp-image-49567\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2025\/06\/Mermaid.png 1024w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2025\/06\/Mermaid-300x300.png 300w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2025\/06\/Mermaid-150x150.png 150w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2025\/06\/Mermaid-768x768.png 768w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2025\/06\/Mermaid-250x250.png 250w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2025\/06\/Mermaid-80x80.png 80w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\">\n\n\n\n<h2 class=\"wp-block-heading\">\ud83d\udcc4 What is Mermaid.js?<\/h2>\n\n\n\n<p><strong>Mermaid.js<\/strong> is an open-source JavaScript library that lets you create diagrams and visualizations using simple markdown-like syntax. It is especially useful for developers, technical writers, DevOps engineers, and data modelers who want to include flowcharts, sequence diagrams, class diagrams, and more directly in documentation or webpages.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Official Site<\/strong>: <a href=\"https:\/\/mermaid.js.org\/\" target=\"_blank\" rel=\"noopener\">https:\/\/mermaid.js.org<\/a><\/li>\n\n\n\n<li><strong>License<\/strong>: MIT<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\">\n\n\n\n<h2 class=\"wp-block-heading\">\u2753 Why Use Mermaid.js?<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">\u2705 Benefits:<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Simple syntax<\/strong>: Easy to learn and write.<\/li>\n\n\n\n<li><strong>Embeddable<\/strong>: Works with HTML, Markdown, GitHub, GitLab, VS Code, Notion, Obsidian, and more.<\/li>\n\n\n\n<li><strong>No external diagram tools needed<\/strong>: Write once, render anywhere.<\/li>\n\n\n\n<li><strong>Customizable<\/strong>: Themes, configs, and rendering options.<\/li>\n\n\n\n<li><strong>Open-source and client-side<\/strong>: No need for server processing.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\">\n\n\n\n<h2 class=\"wp-block-heading\">\u2696\ufe0f Core Features<\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Diagram Type<\/th><th>Syntax Keyword<\/th><th>Use Case<\/th><\/tr><\/thead><tbody><tr><td>Flowchart<\/td><td><code>graph<\/code><\/td><td>Process maps, logic trees<\/td><\/tr><tr><td>Sequence Diagram<\/td><td><code>sequenceDiagram<\/code><\/td><td>API calls, user interactions<\/td><\/tr><tr><td>Class Diagram<\/td><td><code>classDiagram<\/code><\/td><td>Object-oriented design<\/td><\/tr><tr><td>Gantt Chart<\/td><td><code>gantt<\/code><\/td><td>Project timelines<\/td><\/tr><tr><td>State Diagram<\/td><td><code>stateDiagram<\/code><\/td><td>State machines<\/td><\/tr><tr><td>Entity Relationship<\/td><td><code>erDiagram<\/code><\/td><td>Database schema visualization<\/td><\/tr><tr><td>Pie Chart<\/td><td><code>pie<\/code><\/td><td>Proportion data<\/td><\/tr><tr><td>Journey Diagram<\/td><td><code>journey<\/code><\/td><td>Customer\/user journey mapping<\/td><\/tr><tr><td>Git Graph<\/td><td><code>gitGraph<\/code><\/td><td>Git commit history and branching<\/td><\/tr><tr><td>Mindmap (experimental)<\/td><td><code>mindmap<\/code><\/td><td>Brainstorming and ideation<\/td><\/tr><tr><td>Requirement Diagram<\/td><td><code>requirementDiagram<\/code><\/td><td>System\/software requirement modeling<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\">\n\n\n\n<h2 class=\"wp-block-heading\">\ud83d\udd27 How to Use Mermaid.js<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Option 1: Using CDN (Recommended for Beginners)<\/h3>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-meta\">&lt;!DOCTYPE <span class=\"hljs-meta-keyword\">html<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"module\"<\/span>&gt;<\/span><span class=\"javascript\">\n    <span class=\"hljs-keyword\">import<\/span> mermaid <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'https:\/\/cdn.jsdelivr.net\/npm\/mermaid@10\/dist\/mermaid.esm.min.mjs'<\/span>;\n    mermaid.initialize({ <span class=\"hljs-attr\">startOnLoad<\/span>: <span class=\"hljs-literal\">true<\/span> });\n  <\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">head<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">pre<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"mermaid\"<\/span>&gt;<\/span>\n    graph TD\n      A&#91;Start] --&gt; B{Is it working?}\n      B -- Yes --&gt; C&#91;Great]\n      B -- No --&gt; D&#91;Fix it]\n      D --&gt; B\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">pre<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">html<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h3 class=\"wp-block-heading\">Option 2: Install with NPM (Advanced)<\/h3>\n\n\n<pre class=\"wp-block-code\"><span><code class=\"hljs\">npm install mermaid\n<\/code><\/span><\/pre>\n\n\n<p>Then in your JS:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">import<\/span> mermaid <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'mermaid'<\/span>;\nmermaid.initialize({ <span class=\"hljs-attr\">startOnLoad<\/span>: <span class=\"hljs-literal\">true<\/span> });\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\">\n\n\n\n<h2 class=\"wp-block-heading\">\ud83d\udcc8 Examples<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Flowchart<\/h3>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php\">graph LR\n  A&#91;Start] --&gt; B&#91;Next Step]\n  B --&gt; C{Decision?}\n  C -- Yes --&gt; D&#91;<span class=\"hljs-keyword\">Do<\/span> A]\n  C -- No --&gt; E&#91;<span class=\"hljs-keyword\">Do<\/span> B]\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h3 class=\"wp-block-heading\">Sequence Diagram<\/h3>\n\n\n<pre class=\"wp-block-code\"><span><code class=\"hljs\">sequenceDiagram\n  Alice-&gt;&gt;Bob: Hello Bob\n  Bob--&gt;&gt;Alice: Hi Alice\n<\/code><\/span><\/pre>\n\n\n<h3 class=\"wp-block-heading\">Gantt Chart<\/h3>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">gantt<\/span>\n  <span class=\"hljs-selector-tag\">title<\/span> <span class=\"hljs-selector-tag\">Project<\/span> <span class=\"hljs-selector-tag\">Timeline<\/span>\n  <span class=\"hljs-selector-tag\">dateFormat<\/span>  <span class=\"hljs-selector-tag\">YYYY-MM-DD<\/span>\n  <span class=\"hljs-selector-tag\">section<\/span> <span class=\"hljs-selector-tag\">Development<\/span>\n  <span class=\"hljs-selector-tag\">Planning<\/span>       <span class=\"hljs-selector-pseudo\">:done<\/span>,    <span class=\"hljs-selector-tag\">des1<\/span>, 2026<span class=\"hljs-selector-tag\">-01-01<\/span>, 2026<span class=\"hljs-selector-tag\">-01-05<\/span>\n  <span class=\"hljs-selector-tag\">Development<\/span>    <span class=\"hljs-selector-pseudo\">:active<\/span>,  <span class=\"hljs-selector-tag\">des2<\/span>, 2026<span class=\"hljs-selector-tag\">-01-06<\/span>, 10<span class=\"hljs-selector-tag\">d<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\">\n\n\n\n<h2 class=\"wp-block-heading\">\u2699\ufe0f Configuration<\/h2>\n\n\n\n<p>You can configure Mermaid using:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">mermaid<\/span><span class=\"hljs-selector-class\">.initialize<\/span>({\n  <span class=\"hljs-attribute\">startOnLoad<\/span>: true,\n  theme: <span class=\"hljs-string\">'default'<\/span>, \/\/ or <span class=\"hljs-string\">'dark'<\/span>, <span class=\"hljs-string\">'forest'<\/span>, <span class=\"hljs-string\">'neutral'<\/span>\n  securityLevel: <span class=\"hljs-string\">'strict'<\/span>,\n  flowchart: { curve: <span class=\"hljs-string\">'basis'<\/span> },\n});\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\">\n\n\n\n<h2 class=\"wp-block-heading\">\ud83c\udf10 Supported Platforms<\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Platform<\/th><th>Mermaid Support<\/th><\/tr><\/thead><tbody><tr><td>GitHub (Markdown)<\/td><td>\u2705 Yes<\/td><\/tr><tr><td>GitLab<\/td><td>\u2705 Yes<\/td><\/tr><tr><td>Obsidian<\/td><td>\u2705 Plugin<\/td><\/tr><tr><td>Notion<\/td><td>\u2705 Embed workaround<\/td><\/tr><tr><td>VS Code<\/td><td>\u2705 With extension<\/td><\/tr><tr><td>HTML websites<\/td><td>\u2705 Native<\/td><\/tr><tr><td>Docusaurus\/MkDocs<\/td><td>\u2705 With plugins<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\">\n\n\n\n<h2 class=\"wp-block-heading\">\u2753 Tips<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Wrap Mermaid code in <code>&lt;pre class=\"mermaid\"&gt;<\/code> for HTML rendering.<\/li>\n\n\n\n<li>Use the <strong>Live Editor<\/strong>: <a href=\"https:\/\/mermaid.live\/\" target=\"_blank\" rel=\"noopener\">https:\/\/mermaid.live\/<\/a><\/li>\n\n\n\n<li>Use <code>flowchart TD<\/code> or <code>graph LR<\/code> to control flow direction.<\/li>\n\n\n\n<li>Prefer <code>sequenceDiagram<\/code> for time-based flows.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\">\n\n\n\n<h2 class=\"wp-block-heading\">\ud83d\udcc5 Roadmap<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Improvements to <code>mindmap<\/code><\/li>\n\n\n\n<li>Export to PDF\/SVG<\/li>\n\n\n\n<li>Accessibility enhancements<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\">\n\n\n\n<h2 class=\"wp-block-heading\">\ud83d\udcc4 Conclusion<\/h2>\n\n\n\n<p>Mermaid.js is a flexible and lightweight diagramming solution perfect for developers, engineers, and technical writers. Whether you&#8217;re documenting infrastructure, user journeys, or system design, Mermaid makes it easy to visualize and maintain your diagrams directly in code or markdown.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\ud83d\udcc4 What is Mermaid.js? Mermaid.js is an open-source JavaScript library that lets you create diagrams and visualizations using simple markdown-like syntax. It is especially useful for developers, technical writers, DevOps engineers, and data modelers who want to include flowcharts, sequence diagrams, class diagrams, and more directly in documentation or webpages. \u2753 Why Use Mermaid.js? \u2705&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","_joinchat":[],"footnotes":""},"categories":[2],"tags":[],"class_list":["post-49566","post","type-post","status-publish","format-standard","hentry","category-uncategorised"],"_links":{"self":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/49566","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/comments?post=49566"}],"version-history":[{"count":2,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/49566\/revisions"}],"predecessor-version":[{"id":58996,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/49566\/revisions\/58996"}],"wp:attachment":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/media?parent=49566"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/categories?post=49566"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/tags?post=49566"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}