Mermaid is awesome

After the great success of Markdown, someone came up with the brilliant idea of making charts based on it. So, I’m in love with Mermaid! 🙂

It has a JavaScript renderer, which can be wrapped into other things—like, say, a WordPress plugin—and produce visuals like this:

flowchart TD
    A[Find Treasure Map] -->|Decipher clues| B(Start Adventure)
    B --> C{Choose a path}
    C -->|Forest| D[Meet Talking Tree]
    C -->|Mountain| E[Discover Hidden Cave]
    C -->|Desert| G[Find Oasis with Genie]
    C -->|Haunted Mansion| H[Solve Puzzles]
    C -->|Mystic Island| I[Encounter Mermaids]

The above is generated from the following simple markup:

flowchart TD
    A[Find Treasure Map] -->|Decipher clues| B(Start Adventure)
    B --> C{Choose a path}
    C -->|Forest| D[Meet Talking Tree]
    C -->|Mountain| E[Discover Hidden Cave]
    C -->|Desert| G[Find Oasis with Genie]
    C -->|Haunted Mansion| H[Solve Puzzles]
    C -->|Mystic Island| I[Encounter Mermaids]

Or a more complex one (part of the ancient vpopmail system I’m fiddling with):

graph TD
    subgraph get_arguments
        A["Start: vdelivermail receives email: no-reply-office-sofia\@domain.com"] --> B["Get EXT and HOST"]
        B --> C{"EXT contains '-'?"}
        C -->|Yes| D["Split EXT at *first* '-' - TheUser = no-reply-office-sofia"]
        D --> E["TheUserExt = no"]
        E --> F["TheExt = reply-office-sofia"]
        F --> G["Replace '.' with ':' in TheExt"]
        C -->|No| H["TheUserExt = EXT"]
        H --> I["TheExt = ''"]
        G --> J["Continue"]
        I --> J
    end
    J --> K{"User no-reply-office-sofia found?"}
    K -->|No| M{"QMAIL_EXT & no-reply-office-sofia != no?"}
    M -->|Yes| N{"vauth_getpw?"}
    N -->|Yes| L["checkuser() TheUserExt=no"]
    N -->|No| O["usernotfound()"]
    M -->|No| O
    L --> P["check_forward_deliver"]
    subgraph check_forward_deliver
        P --> Q{"TheExt (reply-office-sofia) is not empty?"}
        Q -->|Yes| R["Try .qmail-reply-office-sofia"]
        R --> S{"Opened?"}
        S -->|Yes| T1["Process .qmail-reply-office-sofia"]
        S -->|No| U["Loop backwards through TheExt"]
        U --> V{"Current/Previous char is '-'?"}
        V -->|Yes, i=16| W1["Try .qmail-reply-office-default"]
        W1 --> X1{"Opened?"}
        X1 -->|Yes| T2["Process .qmail-reply-office-default"]
        X1 -->|No| U
        V -->|Yes, i=6| W2["Try .qmail-reply-default"]
        W2 --> X2{"Opened?"}
        X2 -->|Yes| T3["Process .qmail-reply-default"]
        X2 -->|No| U
        V -->|Yes, i=0| W3["Try .qmail-default"]
        W3 --> X3{"Opened?"}
        X3 -->|Yes| T4["Process .qmail-default"]
        X3 -->|No| U
        Q -->|No| Y["Try .qmail"]
        Y --> Z{"Opened?"}
        Z -->|Yes| T5["Process .qmail"]
        Z -->|No| AA["Return -1"]
        T1 --> AB["Return 1"]
        T2 --> AB
        T3 --> AB
        T4 --> AB
        T5 --> AB
    end

Comments