This is the 12th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

Flowchart flowchart is not supported by hexo by default. Short-term flowchart is a simple and useful solution, but the simple syntax makes it difficult to deal with complicated flowcharts. In this paper, the method of adding flowchart to Hexo is described.

Introduction to the

  • Mermaid is a javascript-based charting tool that uses Markdown inspired text definitions and a renderer to create and modify complex charts. The main purpose of Avi is to help keep documentation up to date.

  • Diagrams and documentation cost valuable developer time and quickly become outdated. However, the absence of charts or documentation destroys productivity and makes it difficult to visually express information. Mermaid has addressed this issue by reducing the time, effort and tools required to create modifiable charts to make the content smarter and more reusable. The text definition of the Mermaid diagram allows it to be easily updated, and it can also be part of production scripts (and other code).

  • Official Github: github.com/mermaid-js/…

Add support

Installing a plug-in

npm install --save hexo-filter-mermaid-diagrams
Copy the code

Fluid eliminates the need to install plug-ins

Hexo configuration

  • Modify in the Hexo configuration file

The topic configuration

Next
  • Found in the topic configuration filemermaidOptions,enableSet totrue.

Fluid

  • Found in the topic configuration filemermaidOptions,enableSet totrue.

Other topics need to be configured as required.

Add the Avi code block

The official website has the most complete documentation mermaidjs.github. IO /, which records the common usage methods.

Graph of TD (B (start)) - > C {judge} C - a = 1 - > D/execute statement 1 C - a = 2 - > E [execute statement 2] C - a = 3 - > F [execute statement 3] C - a = 4 - > G/execute statement 4 D -- -- > AA((end)) E--> AA F--> AA G--> AACopy the code
Graph of TD (B (start)) - > C {judge} C - a = 1 - > D/execute statement 1 C - a = 2 - > E [execute statement 2] C - a = 3 - > F [execute statement 3] C - a = 4 - > G/execute statement 4 D -- -- > AA((end)) E--> AA F--> AA G--> AA
  • Another way to write it
graph TD
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]
Copy the code
graph TD
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]

Flowchart syntax

The direction of

The direction of meaning
TB From top to bottom
BT From the bottom up
RL From right to left
LR From left to right
TD The same with TB

node

The syntax structure is as follows: A[name] –> B(name) where, A and B represent the name of the shape, and the arrow points to. The shape style is represented by the following parentheses. The content in the parentheses is the text content to be displayed in the shape. There are several shapes:

Parentheses form The shape style
[] Rectangular box
( ) Rounded rectangular frame
{} The diamond
(()) circular

cable

symbol The arrow
–> The arrow
— No arrow
– – – – / – – – | | text A connector with text
– > text words | | / — — — > Links with arrows and text
-. – > Dotted line
-. Text. – > Dotted line connection with text
= = > Coarse connecting line
Text = = = = > Thick link with text

subgraph

Grammar:

subgraph title
    graph definition
end
Copy the code
graph TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end
Copy the code
graph TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end

Style links

graph LR
    id1(Start)-->id2(Stop)
    style id1 fill:#f9f,stroke:#333,stroke-width:4px
    style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 5, 5
Copy the code
graph LR
    id1(Start)-->id2(Stop)
    style id1 fill:#f9f,stroke:#333,stroke-width:4px
    style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 5, 5

annotation

  • Mermaid annotation for% %

Integrated application of

Graph TB id1(rounded rectangle)-- normal line -->id2 subgraph id2== thick line ==> ID3 {diamond} ID3 - End style ID1 fill:#f9f,stroke:#333,stroke-width:4pxCopy the code
Graph TB id1(rounded rectangle)-- normal line -->id2 subgraph id2== thick line ==> ID3 {diamond} ID3 - End style ID1 fill:#f9f,stroke:#333,stroke-width:4px

Gantt chart

Gantt Section Section Completed :done, DES1, 2014-01-06,2014-01-08 Active: Active, DES2, 2014-01-07, 3D Parallel 1: des3, after des1, 1d Parallel 2 : des4, after des1, 1d Parallel 3 : des5, after des3, 1d Parallel 4 : des6, after des4, 1dCopy the code
Gantt Section Section Completed :done, DES1, 2014-01-06,2014-01-08 Active: Active, DES2, 2014-01-07, 3D Parallel 1: des3, after des1, 1d Parallel 2 : des4, after des1, 1d Parallel 3 : des5, after des3, 1d Parallel 4 : des6, after des4, 1d

The class diagram

classDiagram
Class01 <|-- AveryLongClass : Cool
<<interface>> Class01
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
class Class10 {
  <<service>>
  int id
  size()
}
Copy the code
classDiagram
Class01 <|-- AveryLongClass : Cool
<<interface>> Class01
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
class Class10 {
  <<service>>
  int id
  size()
}

State diagram

stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
Copy the code
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]

The pie chart

pie
"Dogs" : 386
"Cats" : 85
"Rats" : 15
Copy the code
pie
"Dogs" : 386
"Cats" : 85
"Rats" : 15

The journey of figure

  journey
    title My working day
    section Go to work
      Make tea: 5: Me
      Go upstairs: 3: Me
      Do work: 1: Me, Cat
    section Go home
      Go downstairs: 5: Me
      Sit down: 3: Me
Copy the code
  journey
    title My working day
    section Go to work
      Make tea: 5: Me
      Go upstairs: 3: Me
      Do work: 1: Me, Cat
    section Go home
      Go downstairs: 5: Me
      Sit down: 3: Me

Sequence diagram syntax

Start the sequence diagram using the following syntax

SequenceDiagram [Participant 1][Message Line][Participant 2]: Message body...Copy the code

participants

Defining participants

SequenceDiagram Participant 1 Participant participant 2... This syntax can be used to replace participant 312345 with abbreviation in the following descriptionCopy the code

The message thread

| type description | | | – > | no arrow lines | | – > | no arrow dotted lines | | – > > solid | | have arrows | — – > > | | have arrows dotted line | – | x for fork at the end of the solid line (asynchronous) | | — – | x (asynchronous) | for the fork at the end of the dotted line

In the processing

If + is added to the end of the message line, the receiver enters the “processing” state of the current message. Add – to the end of the message line, and the message receiver leaves the “processing” state of the current message.

Or use the following syntax to indicate that a participant is in the “processing” state

Activate participant 1Copy the code

mark

Syntax is as follows

Note position representation participant: annotate text 1Copy the code

Where the position statement can be

describe meaning
right of On the right side
left of On the left side of the
over In it, you can span multiple participants

cycle

Syntax is as follows

Loop the conditional body of the loop describes the statement end123Copy the code

judge

Alt condition 1 describes the branch 1 describes the statement else Condition 2 describes the # ELSE branch Optional branch 2 describes the statement else... . end1234567Copy the code

If there is an optional case where there is no else branch, use the following syntax:

Opt Condition Description Branch description statement endCopy the code

Integrated application of

SequenceDiagram Participant Z as Participant L as Loop Z ->> L: L -->> Z: Yes, and you? Activate Z Note left of Z: Alt hasn't eaten Z-XL: Alt hasn't eaten Z-XL: Alt hasn't eaten Z-XL: Alt hasn't eaten Z-XL: Alt hasn't eaten Z-XL: I'm going to eat else HAVE eaten Z-XL: I've eaten z-XL: HAHA end endCopy the code
SequenceDiagram Participant Z as Participant L as Loop Z ->> L: L -->> Z: Yes, and you? Activate Z Note left of Z: Alt hasn't eaten Z-XL: Alt hasn't eaten Z-XL: Alt hasn't eaten Z-XL: Alt hasn't eaten Z-XL: Alt hasn't eaten Z-XL: I'm going to eat else HAVE eaten Z-XL: I've eaten z-XL: HAHA end end

The official case

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

The resources

  • mermaidjs.github.io
  • www.jianshu.com/p/af48cc77b…
  • Baijiahao.baidu.com/s?id=164180…
  • Blog.csdn.net/fenghuizhid…
  • Github.com/mermaid-js/…