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>Text]</code> | | <code>A>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+) == | ||