-flowchart TD
- A[Christmas] ==> D
- A[Christmas] -->|Get money| B(Go shopping)
- A[Christmas] ==> C
- subgraph T ["Test"]
- A
- B
- C
- end
- classDef Test fill:#F84E68,stroke:#333,color:white;
- class A,T Test
- classDef TestSub fill:green;
- class T TestSub
- linkStyle 0,1 color:orange, stroke: orange;
-
-
-%%{init:{"theme":"base", "themeVariables": {"primaryColor":"#411d4e", "titleColor":"white", "darkMode":true}}}%%
-flowchart LR
-subgraph A
- a --> b
-end
-subgraph B
- i -->f
-end
-A --> B
-
-flowchart TD
- C -->|fa:fa-car Car| F[fa:fa-car Car]
-
-
-flowchart LR
- classDef dark fill:#000,stroke:#000,stroke-width:4px,color:#fff
- Lorem --> Ipsum --> Dolor
- class Lorem,Dolor dark
-
-
-%%{init: {'theme': 'base' }}%%
-%%{init2: { 'logLevel': 0, 'theme': 'forest'} }%%
-flowchart TD
- L1 --- L2
- L2 --- C
- M1 ---> C
- R1 .-> R2
- R2 <.-> C
- C -->|Label 1| E1
- C <-- Label 2 ---> E2
- C ----> E3
- C <-...-> E4
- C ======> E5
-
-
-flowchart LR
-A[red text] -->|default style| B(blue text)
-C([red text]) -->|default style| D[[blue text]]
-E[(red text)] -->|default style| F((blue text))
-G>red text] -->|default style| H{blue text}
-I{{red text}} -->|default style| J[/blue text/]
-K[
-ed text] -->|default style| L[/blue text]
-M[
-ed text/] -->|default style| N[blue text]
-linkStyle default color:Sienna;
-style A stroke:#ff0000,fill:#ffcccc,color:#ff0000
-style B stroke:#0000ff,fill:#ccccff,color:#0000ff
-style C stroke:#ff0000,fill:#ffcccc,color:#ff0000
-style D stroke:#0000ff,fill:#ccccff,color:#0000ff
-style E stroke:#ff0000,fill:#ffcccc,color:#ff0000
-style F stroke:#0000ff,fill:#ccccff,color:#0000ff
-style G stroke:#ff0000,fill:#ffcccc,color:#ff0000
-style H stroke:#0000ff,fill:#ccccff,color:#0000ff
-style I stroke:#ff0000,fill:#ffcccc,color:#ff0000
-style J stroke:#0000ff,fill:#ccccff,color:#0000ff
-style K stroke:#ff0000,fill:#ffcccc,color:#ff0000
-style L stroke:#0000ff,fill:#ccccff,color:#0000ff
-style M stroke:#ff0000,fill:#ffcccc,color:#ff0000
-style N stroke:#0000ff,fill:#ccccff,color:#0000ff
-
+
+classDiagram
+ direction TB
+ class Student {
+ -idCard : IdCard
+ }
+ class IdCard{
+ -id : int
+ -name : string
+ }
+ class Bike{
+ -id : int
+ -name : string
+ }
+ Student "1" --o "1" IdCard : carries
+ Student "1" --o "1" Bike : rides
+
+flowchart TD
+ A[Christmas] ==> D
+ A[Christmas] -->|Get money| B(Go shopping)
+ A[Christmas] ==> C
+ subgraph T ["Test"]
+ A
+ B
+ C
+ end
+
+ classDef Test fill:#F84E68,stroke:#333,color:white;
+ class A,T Test
+ classDef TestSub fill:green;
+ class T TestSub
+ linkStyle 0,1 color:orange, stroke: orange;
+
+flowchart TB
+ c1-->a2
+ subgraph one
+ a1-->a2
+ end
+ subgraph two
+ b1-->b2
+ end
+ subgraph three
+ c1-->c2
+ end
+ one --> two
+ three --> two
+ two --> c2
+
-
-
## About
@@ -24,7 +20,7 @@ But not having diagrams or docs ruins productivity and hurts organizational lear
Mermaid addresses this problem by cutting the time, effort and tooling that is required to create modifiable diagrams and charts, for smarter and more reusable content.
The text definitions for Mermaid diagrams allows for it to be updated easily, it can also be made part of production scripts (and other pieces of code).
So less time needs to be spent on documenting, as a separate and laborious task.