Qiki

Mermaid Flowcharts (with UML Meanings): Difference between revisions

Created page with "<span id="mermaid-flowcharts-with-uml-meanings"></span> = Mermaid Flowcharts (with UML Meanings) = '''Beginner‑friendly guide with short explanations and many examples.''' ----- <span id="what-is-mermaid-flowchart"></span> == 1) What is Mermaid Flowchart? == A '''flowchart''' is a diagram made of '''nodes''' (shapes with text) connected by '''edges''' (lines/arrows). Mermaid lets you write text that renders into a diagram. '''Mermaid Flowchart ≠ UML''': Mermaid..."
 
 
(2 intermediate revisions by the same user not shown)
Line 103: Line 103:
| <code>A([Begin])</code>
| <code>A([Begin])</code>
|-
|-
| <code>A[[Text]]</code>
| <code><nowiki>A[[Text]]</nowiki></code>
| Subroutine / double-rect
| Subroutine / double-rect
| Subprocess
| Subprocess
| '''Call Behavior Action''' (sub‑activity)
| '''Call Behavior Action''' (sub‑activity)
| <code>A[[Recalculate total]]</code>
| <code><nowiki>A[[Recalculate total]]</nowiki></code>
|-
|-
| <code>A[(Text)]</code>
| <code>A[(Text)]</code>
Line 133: Line 133:
| <code>A{In stock?}</code>
| <code>A{In stock?}</code>
|-
|-
| <code>A{{Text}}</code>
| <code><nowiki>A{{Text}}</nowiki></code>
| Hexagon
| Hexagon
| Preparation / condition
| Preparation / condition
| No standard UML; use an '''Action''' with note/stereotype
| No standard UML; use an '''Action''' with note/stereotype
| <code>A{{Prepare}}</code>
| <code><nowiki>A{{Prepare}}</nowiki></code>
|-
|-
| <code>A&gt;Text]</code>
| <code>A&gt;Text]</code>
Line 188: Line 188:


<span id="expanded-shapes-v11.3"></span>
<span id="expanded-shapes-v11.3"></span>
== 6) Expanded shapes (v11.3+) ==
== 6) Expanded shapes (v11.3+) ==


Line 260: Line 261:
|
|
|-
|-
| <code>A -- text --&gt; B</code> or <code>A --&gt;            | text                            | B</code>
| <code><nowiki>A -- text --&gt; B</nowiki></code> or <code><nowiki>A --&gt;            | text                            | B</nowiki></code>
| Labeled edge
| Labeled edge
| UML guards like <code>[x &gt; 0]</code>
| UML guards like <code>[x &gt; 0]</code>
| <code>Check --&gt; | Yes | Ship</code>
| <code><nowiki>Check --&gt; | Yes | Ship</nowiki></code>
|
|
|
|
Line 278: Line 279:
|
|
|-
|-
| <code>A [[User:Ryan|Ryan]] ([[User talk:Ryan|talk]]) B</code>
| <code><nowiki>A ~~~ B</nowiki></code>
| Invisible link (layout only)
| Invisible link (layout only)
| No UML meaning
| No UML meaning
| <code>A [[User:Ryan|Ryan]] ([[User talk:Ryan|talk]]) B</code>
| <code><nowiki>A ~~~ B</nowiki></code>
|
|
|
|
Line 318: Line 319:


<span id="subgraphs-groups"></span>
<span id="subgraphs-groups"></span>
== 8) Subgraphs (groups) ==
== 8) Subgraphs (groups) ==


Retrieved from "https://www.qfqu.com/w/Mermaid_Flowcharts_(with_UML_Meanings)"