ghost

Diagrams as Code in your blog with Mermaid

Marti Sec
Mar 21, 2024
1 min read
diagramscode

So the people that know me might remember that I have a sort of obsession with diagrams. It helps me think and evolve my thoughts. I also love how git works and the importance of having code that can see its changes across time. So it's no surprise I love diagrams as code and try to use them in all my projects.

A recent blog post on SQLMesh required me to create a couple of diagrams for clarification so it was a great excuse to investigate how to include diagrams as code in my blog. And it just takes a couple minutes! Or at least with Ghost blogs.

  1. Go to Settings > Code injection
  2. Add the following code to the Side Footer
<script type="module">
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
  mermaid.initialize({ startOnLoad: true });
</script>

And that is it! To add a diagram just place it in an HTML block

    <pre class="mermaid">
mindmap
  root((perfect<br/>tool))
    Tests
      Type
        Unit-like
        Quality
      Library ready to use
      Custom SQL
      Report
    Deployment
      Opinionated<br/>lifecycle 
      Integrates with git<br/>PR, comments...
        Downstream<br/>changes
      CICD pipelines

    Ops 
      Schema<br/>evolution
      Integrates with<br/>airflow
      Supports multiple<br/>databases
      Data<br/>update modes
        Full
        Incremental
        Delta
      Hands off
    Development
      IDE
      Lineage
        Column level
      Macros
    </pre>
mindmap
  root((perfect
tool)) Tests Type Unit-like Quality Library ready to use Custom SQL Report Deployment Opinionated
lifecycle Integrates with git
PR, comments... Downstream
changes CICD pipelines Ops Schema
evolution Integrates with
airflow Supports multiple
databases Data
update modes Full Incremental Delta Hands off Development IDE Lineage Column level Macros

Check out Mermaid documentation and Mermaid live editor to create your diagrams. They offer multiple diagram options and it's always useful to have the raw code for the diagrams with your writings!