Creating diagrams

Using Mermaid

The sphinxcontrib-mermaid extension allows you to embed Mermaid graphs in your documents, including general flowcharts, sequence diagrams, gantt diagrams and more.

It adds a directive to embed mermaid markup.

Class diagrams

Refer to https://mermaid.ai/open-source/syntax/classDiagram.html for the full syntax.

This class diagram…

        classDiagram
 %% Relationships
 Animal <|-- Duck
 Animal <|-- Fish
 Animal <|-- Zebra

 %% Class Definitions
 class Animal {
     +name: String
     +age: Integer
     +isMammal() Boolean
     +mate()
 }

 class Duck {
     +beakColor: String="yellow"
     +swim()
     +quack()
 }

 class Fish {
     -sizeInCentimetre: Integer
     -swim()
 }

 class Zebra {
     +isWild: Boolean
     +run()
 }
    

…is created by this block of code:

.. mermaid::

   classDiagram
    %% Relationships
    Animal <|-- Duck
    Animal <|-- Fish
    Animal <|-- Zebra

    %% Class Definitions
    class Animal {
        +name: String
        +age: Integer
        +isMammal() Boolean
        +mate()
    }

    class Duck {
        +beakColor: String="yellow"
        +swim()
        +quack()
    }

    class Fish {
        -sizeInCentimetre: Integer
        -swim()
    }

    class Zebra {
        +isWild: Boolean
        +run()
    }

Sequence diagrams

This sequence diagram…

        sequenceDiagram
   participant Alice
   participant Bob
   participant Charlie
   Alice->Bob: How are you?
   loop Thinking
       Bob->Bob: I need a holiday...
   end
   Note right of Bob: Just reply <br/>something...
   Bob-->Alice: Great!
   Bob->Charlie: How about you?
   Charlie-->Bob: Jolly good!
    

…is created by this block of code:

.. mermaid::

   sequenceDiagram
      participant Alice
      participant Bob
      participant Charlie
      Alice->Bob: How are you?
      loop Thinking
          Bob->Bob: I need a holiday...
      end
      Note right of Bob: Just reply <br/>something...
      Bob-->Alice: Great!
      Bob->Charlie: How about you?
      Charlie-->Bob: Jolly good!

Links