Mermaid Layouts

Mermaid diagrams

For the main Mermaid documentation please refer to the Tools and Tips page.

This page is intended to help out with some advanced layout options for Mermaid diagrams such as creating diagrams that are wider than the handbook main content area.

Gantt

Code
gantt title A Gantt Diagram dateFormat YYYY-MM-DD section Section A task :a1, 2014-01-01, 30d Another task :after a1 , 20d section Another Task in sec :2014-01-12 , 12d another task : 24d
2014-01-052014-01-122014-01-192014-01-262014-02-022014-02-092014-02-16A task           Task in sec      another task      Another task     SectionAnotherA Gantt Diagram

Flowchart (centered)

Code
graph TD A[Christmas] -->|Get money| B(Go shopping) B --> C{Let me think} C -->|One| D[Laptop] C -->|Two| E[iPhone] C -->|Three| F[fa:fa-car Car]

Get money

One

Two

Three

Christmas

Go shopping

Let me think

Laptop

iPhone

Car

Sequence Diagram (right aligned)

Code
sequenceDiagram Alice->>+John: Hello John, how are you? Alice->>+John: John, can you hear me? John-->>-Alice: Hi Alice, I can hear you! John-->>-Alice: I feel great!
JohnAliceJohnAliceHello John, how are you?John, can you hear me?Hi Alice, I can hear you!I feel great!

Gantt (wide scrollable)

Code
gantt title A Gantt Diagram dateFormat YYYY-MM-DD section Section A task :a1, 2014-01-01, 30d Another task :after a1 , 20d section Another Task in sec :2014-01-12 , 12d another task : 24d
2014-01-052014-01-122014-01-192014-01-262014-02-022014-02-092014-02-16A task           Task in sec      another task      Another task     SectionAnotherA Gantt Diagram
Last modified August 2, 2023: Fix markdown lint errors (78cb7eda)