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..."
 
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+) ==