Examples

Example of usage of mermaid library fetched from the offical repository.

.. mermaid::

       pie title NETFLIX
       "Time spent looking for movie" : 90
       "Time spent watching it" : 10

pie title NETFLIX "Time spent looking for movie" : 90 "Time spent watching it" : 10

.. mermaid::

       pie title What Voldemort doesn't have?
       "FRIENDS" : 2
       "FAMILY" : 3
       "NOSE" : 45

pie title What Voldemort doesn't have? "FRIENDS" : 2 "FAMILY" : 3 "NOSE" : 45

.. mermaid::

       sequenceDiagram
       Alice ->> Bob: Hello Bob, how are you?
       Bob-->>John: How about you John?
       Bob--x Alice: I am good thanks!
       Bob-x John: I am good thanks!
       Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.

       Bob-->Alice: Checking with John...
       Alice->John: Yes... John, how are you?

sequenceDiagram Alice ->> Bob: Hello Bob, how are you? Bob-->>John: How about you John? Bob--x Alice: I am good thanks! Bob-x John: I am good thanks! Note right of John: Bob thinks a long
long time, so long
that the text does
not fit on a row. Bob-->Alice: Checking with John... Alice->John: Yes... John, how are you?

.. mermaid::

       graph LR
       A[Square Rect] -- Link text --> B((Circle))
       A --> C(Round Rect)
       B --> D{Rhombus}
       C --> D

graph LR A[Square Rect] -- Link text --> B((Circle)) A --> C(Round Rect) B --> D{Rhombus} C --> D

.. mermaid::

       graph TB
       sq[Square shape] --> ci((Circle shape))

       subgraph A
       od>Odd shape]-- Two line<br/>edge comment --> ro
       di{Diamond with <br/> line break} -.-> ro(Rounded<br>square<br>shape)
       di==>ro2(Rounded square shape)
       end

       %% Notice that no text in shape are added here instead that is appended further down
       e --> od3>Really long text with linebreak<br>in an Odd shape]

       %% Comments after double percent signs
       e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-*ز)

       cyr[Cyrillic]-->cyr2((Circle shape Начало));

       classDef green fill:#9f6,stroke:#333,stroke-width:2px;
       classDef orange fill:#f96,stroke:#333,stroke-width:4px;
       class sq,e green
       class di orange

graph TB sq[Square shape] --> ci((Circle shape)) subgraph A od>Odd shape]-- Two line
edge comment --> ro di{Diamond with
line break} -.-> ro(Rounded
square
shape) di==>ro2(Rounded square shape) end %% Notice that no text in shape are added here instead that is appended further down e --> od3>Really long text with linebreak
in an Odd shape] %% Comments after double percent signs e((Inner / circle
and some odd
special characters)) --> f(,.?!+-*ز) cyr[Cyrillic]-->cyr2((Circle shape Начало)); classDef green fill:#9f6,stroke:#333,stroke-width:2px; classDef orange fill:#f96,stroke:#333,stroke-width:4px; class sq,e green class di orange

.. mermaid::

       sequenceDiagram
       loop Daily query
       Alice->>Bob: Hello Bob, how are you?
       alt is sick
       Bob->>Alice: Not so good :(
       else is well
       Bob->>Alice: Feeling fresh like a daisy
       end

       opt Extra response
       Bob->>Alice: Thanks for asking
       end
       end

sequenceDiagram loop Daily query Alice->>Bob: Hello Bob, how are you? alt is sick Bob->>Alice: Not so good :( else is well Bob->>Alice: Feeling fresh like a daisy end opt Extra response Bob->>Alice: Thanks for asking end end

.. mermaid::

       sequenceDiagram
       participant Alice
       participant Bob
       Alice->>John: Hello John, how are you?
       loop Healthcheck
       John->>John: Fight against hypochondria
       end
       Note right of John: Rational thoughts<br/>prevail...
       John-->>Alice: Great!
       John->>Bob: How about you?
       Bob-->>John: Jolly good!

sequenceDiagram participant Alice participant Bob Alice->>John: Hello John, how are you? loop Healthcheck John->>John: Fight against hypochondria end Note right of John: Rational thoughts
prevail... John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good!

.. mermaid::

       sequenceDiagram
       participant web as Web Browser
       participant blog as Blog Service
       participant account as Account Service
       participant mail as Mail Service
       participant db as Storage

       Note over web,db: The user must be logged in to submit blog posts
       web->>+account: Logs in using credentials
       account->>db: Query stored accounts
       db->>account: Respond with query result

       alt Credentials not found
       account->>web: Invalid credentials
       else Credentials found
       account->>-web: Successfully logged in

       Note over web,db: When the user is authenticated, they can now submit new posts
       web->>+blog: Submit new post
       blog->>db: Store post data

       par Notifications
       blog--)mail: Send mail to blog subscribers
       blog--)db: Store in-site notifications
       and Response
       blog-->>-web: Successfully posted
       end
       end

sequenceDiagram participant web as Web Browser participant blog as Blog Service participant account as Account Service participant mail as Mail Service participant db as Storage Note over web,db: The user must be logged in to submit blog posts web->>+account: Logs in using credentials account->>db: Query stored accounts db->>account: Respond with query result alt Credentials not found account->>web: Invalid credentials else Credentials found account->>-web: Successfully logged in Note over web,db: When the user is authenticated, they can now submit new posts web->>+blog: Submit new post blog->>db: Store post data par Notifications blog--)mail: Send mail to blog subscribers blog--)db: Store in-site notifications and Response blog-->>-web: Successfully posted end end