New in v5.4 : Mermaid diagram support

Mermaid is a way to describe a diagram in a few lines of text. As the project states, "Mermaid lets you create diagrams and visualizations using text and code." (More on the mermaid project here.)

Well, as you know, SimpleD is all about diagrams and visualisations! So as of version 5.4, SimpleDiagrams now understands the mermaid format. You can open mermaid-format files, or just drop or paste your mermaid-format text into a SimpleDiagrams document, and start moving shapes, editing labels, changing colours, and so on using SimpleD's world-famous user interface.

This workflow can be really helpful because if an agent or some other process made your mermaid diagram, often it's close but not exaaaactly what you were looking for. So use SimpleD to tweak it until it's just right.

Here's a quick rundown of the new feature...

Import Mermaid diagrams

Copy Mermaid from a README, a wiki, or a chat and choose Edit › Paste. If the Mermaid text is wrapped in triple backticks, you can paste it as-is. Or, if you already have a .mmd or .mermaid file, open it with File › Open… or drop it onto a SimpleD window.

SimpleD supports flowcharts, sequence diagrams, class diagrams, state diagrams, entity-relationship diagrams, pie charts, and Gantt charts.

Four Mermaid examples to try

Sometimes I think about leaving it all behind and just starting a bike shop and racing on Zwift while customers try to figure out why everything costs so much. My trusty business advisor (and probably yours too) came up with some wonderful planning, and delivered it in mermaid format.

I give you permission to you use these legendary plans. Download the 7-day trial so you can start making them your own. Once you've installed SimpleD, copy any of the examples and paste it onto a blank canvas and modify for your own context and FTP (you did intervals this week right? ...right?).

Flowchart · Taking in a bike

Mermaid code

flowchart TD
    A[Bike arrives] --> B[Inspect bike]
    B --> C{Repair needed?}
    C -->|Yes| D[Send quote]
    C -->|No| E[Ready for pickup]

Sequence diagram · Approving a repair

Mermaid code

sequenceDiagram
    participant C as Customer
    participant S as Bike shop
    C->>S: Drop off bike
    S-->>C: Send repair quote
    C->>S: Approve repair
    S-->>C: Bike is ready

ER diagram · Keeping repair records

Mermaid code

erDiagram
    CUSTOMER ||--o{ BIKE : owns
    BIKE ||--o{ REPAIR : needs
    CUSTOMER {
        int id PK
        string name
    }
    BIKE {
        int id PK
        string model
    }
    REPAIR {
        int id PK
        string status
    }

Gantt chart · Planning the work

Mermaid code

gantt
    title Workshop schedule
    dateFormat YYYY-MM-DD
    excludes weekends
    section Prep
    Order parts :p, 2026-11-16, 2d
    section Repair
    Fit parts :r, after p, 2d
    Test ride :t, after r, 1d
    Pickup :milestone, after t, 0d

If you need to share these most excellent plans with others in mermaid format, just use the export feature...

Export or copy Mermaid code

Use File › Export as Mermaid… to save the current page as a .mmd file. Or choose Edit › Copy as Mermaid to copy your selection, or the whole page if nothing is selected. The next Mermaid renderer lays it out afresh.

A Humble Request

When you're an indie developer, nobody cares about you unless lots of people tell them to. Would you mind leaving a review of SimpleDiagrams? I would be so thankful.

← Back to the blog