Mermaid drawing tutorial


Example of mermiad drawing

Flowchart flowchart syntax description

Sequence diagrams syntax description

Class diagrams - class diagrams syntax description

Syntax description of State diagrams

Entity Relationship Diagrams syntax description

User Journey Diagram - syntax description of User Journey Diagram

Gantt chart Gantt syntax description

Instruction - Directives syntax description

Pie chart - Pie chart diagrams syntax description

mermaid online mapping tool - can be saved as a picture

Flow chart - Flowchart

The difference between keyword graph and flowchart: flowchart supports some special properties, such as the connection between subgraphs and more special arrows.

Flow chart direction

  • TB - top to bottom
  • TD - top-down/ same as top to bottom
  • BT - bottom to top
  • RL - right to left
  • LR - left to right

Graphic shape and connection mode

graph LR
	id8{{hexagon node}}
	id1 --- id2 --> id3 -.-> id4
	id5 --- |text1| id6 -->|text2| id7 -.->|text3| id8
	id9 == desc ==>id10
	id9 --> |desc2| id10

When using flowchart instead of graph there is the possibility to use multidirectional arrows.

flowchart LR
        A o--o B
        B <--> C
        C x--x D

Custom style

flowchart can't customize the style (maybe I can't, ha ha)

Use keyword style

graph LR
    style id1 fill:#f9f,stroke:#333,stroke-width:4px
    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
    id1 -->a & b -->id2

Declare as a class and use / subgraph multiple times

It can also be configured directly in the theme configuration file (xxx.css). If a class is named default, it will be assigned to all classes without a specific class definition. Classdefault fill: #f9f, stroke: #333, stroke width: 4PX;.


flowchart TB
    subgraph one
    subgraph two
    subgraph three
    one --> two
    three --> two
    two --> c2


graph LR
	%% flowchart Change to graph it's fine too
	%% Style 1, filled with red, border with blue, border width of two pixels
	classDef mystyle1 fill:#f00, stroke:#00f, stroke-width:2px;
	classDef mystyle2 fill:#0f0, stroke:#f00, stroke-width:4px;
	classDef mystyle3 fill:#00f, stroke:#0f0, stroke-width:8px,color:#fff,stroke-dasharray: 5 5
	classDef default fill:#f9f,stroke:#333,stroke-width:4px;
	%% :::Represents an inherited class (style)
	D[(Default style)]
	A:::mystyle1 --> D
	B:::mystyle2 --> D
	C:::mystyle3 --> D
	%% D Default to default style
	C --> b2
	subgraph one
		a1 --- a2
	subgraph two
		b1 --> b2
	A -.-> a1
	%% graph Graphics cannot be connected between subgraphs, but the elements inside the subgraph can still be connected
	%%one --> two
graph TB
    sq[Square shape] --> ci((Circle shape))

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

    %% 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

Binding event

I don't quite understand

Pie chart pie

    title timeSpend
    "movie" : 20
    "book" : 10
    "study" : 10
    "sleep" : 50

Sequence diagram

Basic syntax: [Actor][Arrow][Actor]:Message text, Actor means role. Among them, Arrow has - >, – >, - > >, – > >, - x, – X.

Styling of a sequence diagram is done by defining a number of css classes. During rendering these classes are extracted from the file located at src/themes/sequence.scss: the style of sequence diagram is completed by defining multiple CSS classes. During rendering, these classes are from Src / themes / sequence Extracted from the file in SCSS.

	%% auto number
	%% aliases,alias
        participant J as John
        participant A as Alice
        participant C as CofCai
        A->>J: Hello John, how are you?
        J-->>A: Great!
        %% Notes
        Note left of J: I'm John
        Note right of A: I'm Alice
        Note over J,A: a typical interaction
        %% loop
        loop Every minute
        	J -->> A:I love you!
        %% Selectable path
        alt is sick
        	J ->> A:Not so good
        else is well
        	J ->> A:fell so good!
        %% No, else You can provide the default opt
        opt Extra response
        	J ->> A:Thanks for asking
        %% Show actions that occur in parallel, parallel: parallel
        %% par [action1]
        par action1
        	A -->> J:hello guys
        and action2
        	A -->> C:hello guys
        and action3
        	C ->>J:hello guys
        %% Highlight the background to provide a colored background rectangle
        rect rgb(255, 255, 0)
        	loop come
        		%% <br/>Can wrap
        		C ->> C:I have color<br/>Self circulation of

class diagrams

Used to express the ownership relationship between classes

	%% Duck Inherited from Animal
        Animal <|-- Duck
        Animal <|-- Fish
        Animal <|-- Zebra
        %% +Namely public;-Namely private;#protected~ Package/Internal
        Animal : +int age
        Animal : +String gender
        %% Return value type, followed by parentheses. Remember to have a space
        Animal: +isMammal() bool
        Animal: +mate()
        %% Duck have Animal Properties and methods of
        class Duck{
            +String beakColor
        class Fish{
            -int sizeInFeet
        class Zebra{
            +bool is_wild
        Duck <|-- yellowDuck
        class yellowDuck{
        	-string color
        	-int size

Relationship between classes

	%% [classA][Arrow][ClassB]:LabelText
        classA --|> classB : Inheritance
        classC --* classD : Composition
        classE --o classF : Aggregation
        classG --> classH : Association
        classI -- classJ : Link(Solid)
        classK ..> classL : Dependency
        classM ..|> classN : Realization
        classO .. classP : Link(Dashed)

Class annotation

  • <<Interface>> To represent an Interface class
  • <<abstract>> To represent an abstract class
  • <<Service>> To represent a service class
  • <<enumeration>> To represent an enum
    class Shape{
    class Color{

State diagrams

State diagram is a kind of diagram used to describe system behavior in computer science and related fields. The state diagram requires the system described to be composed of a limited number of states;

Styling of the a state diagram is done by defining a number of css classes. During rendering these classes are extracted from the file located at src/themes/state.scss: the style of the state diagram is accomplished by defining multiple CSS classes. During rendering, these classes are from Src / themes / state Extracted from the file in SCSS.

	%% Definition of status
	%% state "this is a state description" as s2
	%% s2: this is a state description
	%% State transition transitions
	%% s1 --> s2: A transitions
    [*] --> Still:begin
    Still --> [*]

    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]

An example to see all

	%% fork: Fork, join: coupling
	%% Declare a fork/dispersed
	state fork_state <<fork>>
	%% Declare a join/Convergence
	state join_state <<join>>
     %% label
     note left of fork_state: This is a separation point
     note left of join_state: This is a gathering point

     state First {
         [*] --> fir
         fir --> [*]
         state inner {
                [*] --> a
                a --> [*]
     state Second {
         [*] --> sec
         sec --> [*]
     state Third {
         [*] --> thi
         thi --> [*]
     [*] --> fork_state
     fork_state --> First
     fork_state --> Second
     First --> join_state
     Second --> join_state
     join_state --> Third


    [*] --> Active

    state Active {
        [*] --> NumLockOff
        NumLockOff --> NumLockOn : EvNumLockPressed
        NumLockOn --> NumLockOff : EvNumLockPressed
        [*] --> CapsLockOff
        CapsLockOff --> CapsLockOn : EvCapsLockPressed
        CapsLockOn --> CapsLockOff : EvCapsLockPressed
        [*] --> ScrollLockOff
        ScrollLockOff --> ScrollLockOn : EvCapsLockPressed
        ScrollLockOn --> ScrollLockOff : EvCapsLockPressed

Entity relationship diagram

await a vacancy or job opening

User journey map

await a vacancy or job opening

Gantt chart

await a vacancy or job opening

Tags: css markdown tools

Posted by nati on Sun, 08 May 2022 15:11:21 +0300