« Mermaid - graph » : différence entre les versions
De Semantic MediaWiki - Sandbox
m (→Wide top-down graph example : add a remark stating why this example even exists) |
(→Wide top-down graph example : add sort-of-a-workaround using 'subgraph') |
||
Ligne 64 : | Ligne 64 : | ||
}} | }} | ||
|} | |} | ||
===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].'' | |||
{| class="wikitable" width=100% | |||
! width="50%" | What you type | |||
! What you get | |||
|- | |||
| <pre>{{#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> | |||
| {{#mermaid: config.flowchart.useMaxWidth=true <!-- https://mermaid-js.github.io/mermaid/#/Setup --> | graph TD | |||
%%{init: {'theme': 'base'{{))}}%% | |||
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}} | {{Keywords|Keywords=mermaid;graph}} | ||
[[Category:Mermaid examples]] | [[Category:Mermaid examples]] |
Version du 25 septembre 2021 à 02:59
→ Back to Mermaid overview
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 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
What you type | What you get |
---|---|
{{#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 theme variables.
What you type | What you get |
---|---|
{{#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 }} |