ghost

Diagrams as Code in your blog with Mermaid

Marti Sec

Marti Sec

— 1 min read

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!

Read more