Différences entre les versions de « Mermaid - graph »

De Semantic MediaWiki - Sandbox

(add)
(chg)
 
(20 versions intermédiaires par 2 utilisateurs non affichées)
Ligne 1 : Ligne 1 :
−
== example 1 - graph ==
+
<big>→ Back to [[Mermaid|Mermaid overview]]</big>
−
{{#mermaid:graph
+
<div style="float: right">__TOC__</div>
−
    TD;
+
== Graph example ==
−
    A-->B;
+
; Syntax
−
    A-->C;
+
<pre>
−
    B-->D;
+
{{#mermaid:graph TD;
−
    C-->D;
+
A-->B;
 +
A-->C;
 +
B-->D;
 +
C-->D;
 
}}
 
}}
 +
</pre>
  
−
== example 2 - sequence diagram ==
+
; Result
−
{{#mermaid:sequenceDiagram
+
{{#mermaid:graph TD;
−
participant Alice
+
A-->B;
−
participant Bob
+
A-->C;
−
  Alice->John: Hello John, how are you?
+
B-->D;
−
  loop Healthcheck
+
C-->D;
−
      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!
 
 
}}
 
}}
 +
 +
== 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
 +
 +
<pre>
 +
{{#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>
 +
 +
; Result
 +
{{#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
 +
<pre>
 +
{{#mermaid: config.flowchart.useMaxWidth=true | graph TD
 +
subgraph &nbsp;
 +
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>
 +
 +
; Result
 +
 +
{{#mermaid: config.flowchart.useMaxWidth=true <!-- https://mermaid-js.github.io/mermaid/#/Setup --> | graph TD
 +
%%{init: {'theme': 'base'{{<nowiki>))</nowiki>}}%%
 +
subgraph &nbsp;
 +
  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:

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
Récupérée de « https://sandbox.semantic-mediawiki.net/w/index.php?title=Mermaid_-_graph&oldid=50874 »
Les cookies nous aident à fournir nos services. En utilisant nos services, vous acceptez notre utilisation de cookies.
Davantage d’informations