blob: d56fb8e930fdc860051231bdf68ba13dda60ffc9 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
|
Mermaid Integration
===================
Mermaid is a tool that lets you generate flow charts, sequence diagrams, gantt
charts, class diagrams and vcs graphs from a simple markup language. This
allows charts and diagrams to be embedded and edited directly in the
documentation source files rather than creating them as images using some
external tool and checking the images into the tree.
To add a diagram, simply put something like this into your page:
.. These two examples come from the upstream website (https://mermaid-js.github.io/mermaid/#/)
.. code-block:: shell
.. mermaid::
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
The result will be:
.. mermaid::
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
Or
.. code-block:: shell
.. 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!
will show:
.. 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!
See `Mermaid's official <https://mermaid-js.github.io/mermaid/#/>`__ docs for
more details on the syntax, and use the
`Mermaid Live Editor <https://mermaidjs.github.io/mermaid-live-editor/>`__ to
experiment with creating your own diagrams.
|
