Différences entre les versions de « Mermaid - graph »
De Semantic MediaWiki - Sandbox
(→example 2 - sequence diagram : form) |
(chg) |
||
(16 versions intermédiaires par 2 utilisateurs non affichées) | |||
Ligne 1 : | Ligne 1 : | ||
− | + | <big>→ Back to [[Mermaid|Mermaid overview]]</big> | |
− | + | <div style="float: right">__TOC__</div> | |
− | == example | + | == Graph example == |
; Syntax | ; Syntax | ||
<pre> | <pre> | ||
Ligne 11 : | Ligne 11 : | ||
}} | }} | ||
</pre> | </pre> | ||
+ | |||
; Result | ; Result | ||
{{#mermaid:graph TD; | {{#mermaid:graph TD; | ||
Ligne 19 : | Ligne 20 : | ||
}} | }} | ||
− | == example | + | == Wide top-down graph example == |
+ | |||
+ | ''Note that, <abbr title="15 September 2021">as of this writing</abbr>, an issue exists where the leftmost unlabelled edge is sometimes cut off in the rendered diagram.'' | ||
+ | |||
+ | See also: | ||
+ | * https://github.com/SemanticMediaWiki/Mermaid/issues/73 | ||
+ | * [https://github.com/mermaid-js/mermaid/issues/1288 this mermaid.js issue] and [https://github.com/mermaid-js/mermaid/pull/1333 the assocated PR] on GitHub | ||
+ | |||
; Syntax | ; Syntax | ||
+ | |||
<pre> | <pre> | ||
− | {{#mermaid: | + | {{#mermaid:graph TD |
− | + | A[input files] --> B[pipeline] | |
− | + | B --> C[output 1] | |
− | + | B --> D[output 2] | |
− | + | C --> E[post-process 1] | |
− | + | C --> F[post-process 2] | |
− | + | C --> G[post-process 2] | |
− | + | D --> G[post-process 2] | |
− | + | C --> H[display] | |
− | + | D --> H[dipslay] | |
− | + | B --> I[summary] | |
+ | E --> I[summary] | ||
+ | F --> I[summary] | ||
+ | G --> I[summary] | ||
+ | H --> I[summary] | ||
}} | }} | ||
</pre> | </pre> | ||
+ | |||
; Result | ; Result | ||
− | {{#mermaid: | + | {{#mermaid:graph TD |
− | + | A[input files] --> B[pipeline] | |
− | + | B --> C[output 1] | |
− | + | B --> D[output 2] | |
− | + | C --> E[post-process 1] | |
− | + | C --> F[post-process 2] | |
− | + | C --> G[post-process 2] | |
− | + | D --> G[post-process 2] | |
− | + | C --> H[display] | |
− | + | D --> H[dipslay] | |
− | + | B --> I[summary] | |
+ | E --> I[summary] | ||
+ | F --> I[summary] | ||
+ | G --> I[summary] | ||
+ | H --> I[summary] | ||
}} | }} | ||
− | == | + | ===Workaround using a subgraph=== |
+ | |||
+ | ''Not optimal, because the subgraph gets styled with a solid color background, but theoretically this could be overridden with CSS or [https://mermaid-js.github.io/mermaid/#/theming?id=flowchart theme variables].'' | ||
+ | |||
; Syntax | ; Syntax | ||
<pre> | <pre> | ||
− | {{#mermaid: | + | {{#mermaid: config.flowchart.useMaxWidth=true | graph TD |
− | + | subgraph | |
− | + | A[input files] --> B[pipeline] | |
− | + | B --> C[output 1] | |
− | + | B --> D[output 2] | |
− | + | C --> E[post-process 1] | |
− | + | C --> F[post-process 2] | |
− | + | C --> G[post-process 2] | |
− | + | D --> G[post-process 2] | |
− | + | C --> H[display] | |
− | + | D --> H[dipslay] | |
− | + | B --> I[summary] | |
− | + | E --> I[summary] | |
− | + | F --> I[summary] | |
− | + | G --> I[summary] | |
+ | H --> I[summary] | ||
+ | end | ||
}} | }} | ||
</pre> | </pre> | ||
+ | |||
; Result | ; Result | ||
− | {{#mermaid: | + | |
− | + | {{#mermaid: config.flowchart.useMaxWidth=true <!-- https://mermaid-js.github.io/mermaid/#/Setup --> | graph TD | |
− | + | %%{init: {'theme': 'base'{{<nowiki>))</nowiki>}}%% | |
− | + | subgraph | |
− | + | A[input files] --> B[pipeline] | |
− | + | B --> C[output 1] | |
− | + | B --> D[output 2] | |
− | + | C --> E[post-process 1] | |
− | + | C --> F[post-process 2] | |
− | + | C --> G[post-process 2] | |
− | + | D --> G[post-process 2] | |
− | + | C --> H[display] | |
− | + | D --> H[dipslay] | |
− | + | B --> I[summary] | |
− | + | E --> I[summary] | |
+ | F --> I[summary] | ||
+ | G --> I[summary] | ||
+ | H --> I[summary] | ||
+ | end | ||
}} | }} | ||
+ | |||
+ | {{Keywords|Keywords=mermaid;graph}} | ||
[[Category:Mermaid examples]] | [[Category:Mermaid examples]] |
Dernière version du 25 septembre 2021 à 19:29
→ Back to Mermaid overview
Graph example
- Syntax
{{#mermaid:graph TD; A-->B; A-->C; B-->D; C-->D; }}
- Result
Wide top-down graph example
Note that, as of this writing, an issue exists where the leftmost unlabelled edge is sometimes cut off in the rendered diagram.
See also:
- https://github.com/SemanticMediaWiki/Mermaid/issues/73
- this mermaid.js issue and the assocated PR on GitHub
- Syntax
{{#mermaid:graph TD A[input files] --> B[pipeline] B --> C[output 1] B --> D[output 2] C --> E[post-process 1] C --> F[post-process 2] C --> G[post-process 2] D --> G[post-process 2] C --> H[display] D --> H[dipslay] B --> I[summary] E --> I[summary] F --> I[summary] G --> I[summary] H --> I[summary] }}
- Result
Workaround using a subgraph
Not optimal, because the subgraph gets styled with a solid color background, but theoretically this could be overridden with CSS or theme variables.
- Syntax
{{#mermaid: config.flowchart.useMaxWidth=true | graph TD subgraph A[input files] --> B[pipeline] B --> C[output 1] B --> D[output 2] C --> E[post-process 1] C --> F[post-process 2] C --> G[post-process 2] D --> G[post-process 2] C --> H[display] D --> H[dipslay] B --> I[summary] E --> I[summary] F --> I[summary] G --> I[summary] H --> I[summary] end }}
- Result