Is it possible to create this diagram using mermaid and styling

Question

I'd like to create diagrams like this, in mermaid

Is this possible? How?!

Thanks

Answer 1

As of today (version 10.1.0), none of the supported mermaid diagrams have an exact match to what you have asked for, the closest is the flowchart. The main differences from your drawing are that in mermaid you cannot change the style of the arrowhead (size or color) or manipulate the distance from the nodes.

But you can get something similar to what you asked for:

• Flow chart graph from left to right
• Nodes with round edges
• Myltiple styles
• Linear curve style (give the closet results)

I have tested the following codeblock in GitHub Markdown:

```mermaid
%%{init: {"flowchart": {"curve": "linear"}, "themeVariables": {"edgeLabelBackground": "transparent"}}}%%
flowchart LR
    wd(\n\n\nworking\ndirectory\n\n\n&nbsp)
    sa(staging\narea)
    lg(\nlocal\n.git\n&nbsp)
    rg("\n\n\nremote\n[github]\n\n\n&nbsp")
    
    lg -->|checkout| wd
    wd -->|add| sa
    sa -->|commit| lg
    lg -->|push| rg
    rg -->|fetch| lg
    rg --->|pull| wd
    
    %% Styles
    style wd fill:#fff,stroke:#000
    style sa fill:#d9ead3,stroke:#000
    style lg fill:#93c47d,stroke:#000
    style rg fill:#eee,stroke:#000
    linkStyle 0 stroke:#f4cccc,stroke-width:10px %% Arrow checkout
    linkStyle 1 stroke:#cfe2f3,stroke-width:10px %% Arrow add
    linkStyle 2 stroke:#6fa8dc,stroke-width:10px %% Arrow commit
    linkStyle 3 stroke:#0b5394,stroke-width:10px %% Arrow push
    linkStyle 4 stroke:#e6b8af,stroke-width:10px %% Arrow fetch
    linkStyle 5 stroke:#dd7e6b,stroke-width:10px %% Arrow pull
```

This results in the following output:

And at mermaid live editor it looks like this: