+flowchart
+id["`A root with a long text that wraps to keep the node size in check. A root with a long text that wraps to keep the node size in check`"]
+
+flowchart LR
+ A[A text that needs to be wrapped wraps to another line]
+ B[A text that needs to be wrapped wraps to another line]
+ C["`A text that needs to be wrapped to another line`"]
+
+flowchart LR
+ C["`A text
+ that needs
+ to be wrapped
+ in another
+ way`"]
+
+
+ classDiagram-v2
+ note "I love this diagram!\nDo you love it?"
+
+
+ stateDiagram-v2
+ State1: The state with a note with minus - and plus + in it
+ note left of State1
+ Important information! You can write
+ notes with . and in them.
+ end note
+
+mindmap
+root
+ Child3(A node with an icon and with a long text that wraps to keep the node size in check)
+
+
+ %%{init: {"theme": "forest"} }%%
+mindmap
+ id1[**Start2** end]
+ id2[**Start2** end]
+ %% Another comment
+ id3[**Start2** end] %% Comment
+ id4[**Start2** end the very end]
+
+
+mindmap
+ id1["`**Start2**
+ second line 😎 with long text that is wrapping to the next line`"]
+ id2["`Child **with bold** text`"]
+ id3["`Children of which some
+ is using *italic type of* text`"]
+ id4[Child]
+ id5["`Child
+ Row
+ and another
+ `"]
+
+
+mindmap
+ id1("`**Root**`"]
+ id2["`A formatted text... with **bold** and *italics*`"]
+ id3[Regular labels works as usual]
+ id4["`Emojis and unicode works too: 🤓
+ शान्तिः سلام 和平 `"]
+
+
+
+%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
+flowchart TB
+ %% I could not figure out how to use double quotes in labels in Mermaid
+ subgraph ibm[IBM Espresso CPU]
+ core0[IBM PowerPC Broadway Core 0]
+ core1[IBM PowerPC Broadway Core 1]
+ core2[IBM PowerPC Broadway Core 2]
+
+ rom[16 KB ROM]
+
+ core0 --- core2
+
+ rom --> core2
+ end
+
+ subgraph amd["`**AMD** Latte GPU`"]
+ mem[Memory & I/O Bridge]
+ dram[DRAM Controller]
+ edram[32 MB EDRAM MEM1]
+ rom[512 B SEEPROM]
+
+ sata[SATA IF]
+ exi[EXI]
+
+ subgraph gx[GX]
+ sram[3 MB 1T-SRAM]
+ end
+
+ radeon[AMD Radeon R7xx GX2]
+
+ mem --- gx
+ mem --- radeon
+
+ rom --- mem
+
+ mem --- sata
+ mem --- exi
+
+ dram --- sata
+ dram --- exi
+ end
+
+ ddr3[2 GB DDR3 RAM MEM2]
+
+ mem --- ddr3
+ dram --- ddr3
+ edram --- ddr3
+
+ core1 --- mem
+
+ exi --- rtc
+ rtc{{rtc}}
+
+
+%%{init: {"flowchart": {"defaultRenderer": "elk", "htmlLabels": false}} }%%
+flowchart TB
+ %% I could not figure out how to use double quotes in labels in Mermaid
+ subgraph ibm[IBM Espresso CPU]
+ core0[IBM PowerPC Broadway Core 0]
+ core1[IBM PowerPC Broadway Core 1]
+ core2[IBM PowerPC Broadway Core 2]
+
+ rom[16 KB ROM]
+
+ core0 --- core2
+
+ rom --> core2
+ end
+
+ subgraph amd["`**AMD** Latte GPU`"]
+ mem[Memory & I/O Bridge]
+ dram[DRAM Controller]
+ edram[32 MB EDRAM MEM1]
+ rom[512 B SEEPROM]
+
+ sata[SATA IF]
+ exi[EXI]
+
+ subgraph gx[GX]
+ sram[3 MB 1T-SRAM]
+ end
+
+ radeon[AMD Radeon R7xx GX2]
+
+ mem --- gx
+ mem --- radeon
+
+ rom --- mem
+
+ mem --- sata
+ mem --- exi
+
+ dram --- sata
+ dram --- exi
+ end
+
+ ddr3[2 GB DDR3 RAM MEM2]
+
+ mem --- ddr3
+ dram --- ddr3
+ edram --- ddr3
+
+ core1 --- mem
+
+ exi --- rtc
+ rtc{{rtc}}
+
+
+
+
+flowchart TB
+ %% I could not figure out how to use double quotes in labels in Mermaid
+ subgraph ibm[IBM Espresso CPU]
+ core0[IBM PowerPC Broadway Core 0]
+ core1[IBM PowerPC Broadway Core 1]
+ core2[IBM PowerPC Broadway Core 2]
+
+ rom[16 KB ROM]
+
+ core0 --- core2
+
+ rom --> core2
+ end
+
+ subgraph amd[AMD Latte GPU]
+ mem[Memory & I/O Bridge]
+ dram[DRAM Controller]
+ edram[32 MB EDRAM MEM1]
+ rom[512 B SEEPROM]
+
+ sata[SATA IF]
+ exi[EXI]
+
+ subgraph gx[GX]
+ sram[3 MB 1T-SRAM]
+ end
+
+ radeon[AMD Radeon R7xx GX2]
+
+ mem --- gx
+ mem --- radeon
+
+ rom --- mem
+
+ mem --- sata
+ mem --- exi
+
+ dram --- sata
+ dram --- exi
+ end
+
+ ddr3[2 GB DDR3 RAM MEM2]
+
+ mem --- ddr3
+ dram --- ddr3
+ edram --- ddr3
+
+ core1 --- mem
+
+ exi --- rtc
+ rtc{{rtc}}
+
+sequenceDiagram
+ Customer->>+Stripe: Makes a payment request
+ Stripe->>+Bank: Forwards the payment request to the bank
+ Bank->>+Customer: Asks for authorization
+ Customer->>+Bank: Provides authorization
+ Bank->>+Stripe: Sends a response with payment details
+ Stripe->>+Merchant: Sends a notification of payment receipt
+ Merchant->>+Stripe: Confirms the payment
+ Stripe->>+Customer: Sends a confirmation of payment
+ Customer->>+Merchant: Receives goods or services
+
+
+mindmap
+ root((mindmap))
+ Origins
+ Long history
+ ::icon(fa fa-book)
+ Popularisation
+ British popular psychology author Tony Buzan
+ Research
+ On effectiveness and features
+ On Automatic creation
+ Uses
+ Creative techniques
+ Strategic planning
+ Argument mapping
+ Tools
+ Pen and paper
+ Mermaid
+
+%%{
+ init: {
+ "theme":"base",
+ "fontFamily": "Kalam",
+ "themeVariables": {
+ "background": "#FFFFFF",
+ "primaryColor": "#7bdfa7",
+ "primaryTextColor": "#3c3c3b",
+ "secondaryColor": "#642470",
+ "secondaryTextColor": "#3c3c3b",
+ "tertiaryColor": "#1c736D",
+ "tertiaryTextColor": "#3c3c3b",
+ "noteBkgColor": "#9fd8ef",
+ "loopTextColor": "#636362",
+ "labelBoxBkgColor": "#642470",
+ "labelBoxBorderColor": "#642470",
+ "labelTextColor": "#d4d4d4",
+ "signalTextColor": "#636362",
+ "signalColor": "#642470"
+ }
+ }
+}%%
sequenceDiagram
- alt apa
Alice->>+John: Hello John, how are you?
Alice->>+John: John, can you hear me?
- note right of Alice: John thinks\nabout it
John-->>-Alice: Hi Alice, I can hear you!
John-->>-Alice: I feel great!
- end
-
-
-
+
-%%{ init: {}}%%
-
+%%{
+ init: {
+ "theme":"base",
+ "fontFamily": "Forth Bold",
+ "themeVariables": {
+ "background": "#FFFFFF",
+ "primaryColor": "#7bdfa7",
+ "primaryTextColor": "#3c3c3b",
+ "secondaryColor": "#642470",
+ "secondaryTextColor": "#3c3c3b",
+ "tertiaryColor": "#1c736D",
+ "tertiaryTextColor": "#3c3c3b",
+ "noteBkgColor": "#9fd8ef",
+ "loopTextColor": "#636362",
+ "labelBoxBkgColor": "#642470",
+ "labelBoxBorderColor": "#642470",
+ "labelTextColor": "#d4d4d4",
+ "signalTextColor": "#636362",
+ "signalColor": "#642470"
+ }
+ }
+}%%
sequenceDiagram
- participant H as H
- participant Alice as Alice
- participant Bob as Bob
+ Alice->>+John: Hello John, how are you?
+ Alice->>+John: John, can you hear me?
+ John-->>-Alice: Hi Alice, I can hear you!
+ John-->>-Alice: I feel great!
+
- Alice ->> Bob: Hello Bob, how are you ?
- Bob ->> Alice: Fine, thank you. And you?
- create participant Carl as Carl
- Alice ->> Carl: Hi Carl!
- create actor D as Donald
- Carl ->> D: Hi!
- D ->> H: sss
- destroy Carl
- Alice -x Carl: We are too many
- destroy Bob
- Bob ->> Alice: I agree
-
-
-
-block-beta
- columns 3
- a:3
- block:e:3
- f
- end
- g
-
-
-block-beta
- columns 3
- a:3
- block:e:3
- f
- g
- end
- h
- i
- j
-
-
-
-block-beta
-columns 3
- a b:2
- block:e:3
- f
- end
- g h i
-
-
-block-beta
-columns 3
- a b c
- e:3
- f g h
-
-
-block-beta
-columns 1
- db(("DB"))
- blockArrowId6<[" "]>(down)
- block:ID
- A
- B["A wide one in the middle"]
- C
- end
- space
- D
- ID --> D
- C --> D
- style B fill:#f9F,stroke:#333,stroke-width:4px
-
-flowchart
-id["`A root with a long text that wraps to keep the node size in check. A root with a long text that wraps to keep the node size in check`"]
+ %%{init: {"layout": "elk", "mergeEdges": false, "elk.nodePlacement.strategy": "NETWORK_SIMPLEX"} }%%
+stateDiagram
+ State T0 {
+ direction LR
+ A --> B
+ }
+ State T1 {
+ [*] --> NumLockOff
+ NumLockOff --> NumLockOn : EvNumLockPressed
+ NumLockOn --> NumLockOff : EvNumLockPressed
+ }
+
-flowchart LR
- A[A text that needs to be wrapped wraps to another line]
- B[A text that needs to be wrapped wraps to another line]
- C["`A text that needs to be wrapped to another line`"]
-
-flowchart LR
- C["`A text
- that needs
- to be wrapped
- in another
- way`"]
-
- classDiagram-v2
- note "I love this diagram!\nDo you love it?"
-
- stateDiagram-v2
- State1: The state with a note with minus - and plus + in it
- note left of State1
+ %%{init: {"layout": "elk", "mergeEdges": true} }%%
+stateDiagram
+ direction TB
+ State T1 {
+ T11
+ }
+
+ %%{init: {"layout": "elk"} }%%
+stateDiagram
+ [*] --> T1
+ T1 --> T2
+ T2 --> T3
+ T3 --> T1
+ T1 --> T3
+
+
+stateDiagram
+ State1: The state with a note
+ note right of State1
Important information! You can write
- notes with . and in them.
- end note
-mindmap
-root
- Child3(A node with an icon and with a long text that wraps to keep the node size in check)
-
Active
+
+ state Active {
+ direction BT
+ [*] --> Inner
+ Inner --> NumLockOn : EvNumLockPressed
+ }
+ %% Outer --> Inner
+
-
- %%{init: {"theme": "forest"} }%%
-mindmap
- id1[**Start2** end]
- id2[**Start2** end]
- %% Another comment
- id3[**Start2** end] %% Comment
- id4[**Start2** end the very end]
-
-
-mindmap
- id1["`**Start2**
- second line 😎 with long text that is wrapping to the next line`"]
- id2["`Child **with bold** text`"]
- id3["`Children of which some
- is using *italic type of* text`"]
- id4[Child]
- id5["`Child
- Row
- and another
- `"]
-
-
-mindmap
- id1("`**Root**`"]
- id2["`A formatted text... with **bold** and *italics*`"]
- id3[Regular labels works as usual]
- id4["`Emojis and unicode works too: 🤓
- शान्तिः سلام 和平 `"]
-
-
-
-%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
-flowchart TB
- %% I could not figure out how to use double quotes in labels in Mermaid
- subgraph ibm[IBM Espresso CPU]
- core0[IBM PowerPC Broadway Core 0]
- core1[IBM PowerPC Broadway Core 1]
- core2[IBM PowerPC Broadway Core 2]
-
- rom[16 KB ROM]
-
- core0 --- core2
-
- rom --> core2
- end
-
- subgraph amd["`**AMD** Latte GPU`"]
- mem[Memory & I/O Bridge]
- dram[DRAM Controller]
- edram[32 MB EDRAM MEM1]
- rom[512 B SEEPROM]
-
- sata[SATA IF]
- exi[EXI]
-
- subgraph gx[GX]
- sram[3 MB 1T-SRAM]
- end
-
- radeon[AMD Radeon R7xx GX2]
-
- mem --- gx
- mem --- radeon
-
- rom --- mem
-
- mem --- sata
- mem --- exi
-
- dram --- sata
- dram --- exi
- end
-
- ddr3[2 GB DDR3 RAM MEM2]
-
- mem --- ddr3
- dram --- ddr3
- edram --- ddr3
-
- core1 --- mem
-
- exi --- rtc
- rtc{{rtc}}
-
-
-%%{init: {"flowchart": {"defaultRenderer": "elk", "htmlLabels": false}} }%%
-flowchart TB
- %% I could not figure out how to use double quotes in labels in Mermaid
- subgraph ibm[IBM Espresso CPU]
- core0[IBM PowerPC Broadway Core 0]
- core1[IBM PowerPC Broadway Core 1]
- core2[IBM PowerPC Broadway Core 2]
-
- rom[16 KB ROM]
-
- core0 --- core2
-
- rom --> core2
- end
-
- subgraph amd["`**AMD** Latte GPU`"]
- mem[Memory & I/O Bridge]
- dram[DRAM Controller]
- edram[32 MB EDRAM MEM1]
- rom[512 B SEEPROM]
-
- sata[SATA IF]
- exi[EXI]
-
- subgraph gx[GX]
- sram[3 MB 1T-SRAM]
- end
-
- radeon[AMD Radeon R7xx GX2]
-
- mem --- gx
- mem --- radeon
-
- rom --- mem
-
- mem --- sata
- mem --- exi
-
- dram --- sata
- dram --- exi
- end
-
- ddr3[2 GB DDR3 RAM MEM2]
-
- mem --- ddr3
- dram --- ddr3
- edram --- ddr3
-
- core1 --- mem
-
- exi --- rtc
- rtc{{rtc}}
-
-
-
-
-flowchart TB
- %% I could not figure out how to use double quotes in labels in Mermaid
- subgraph ibm[IBM Espresso CPU]
- core0[IBM PowerPC Broadway Core 0]
- core1[IBM PowerPC Broadway Core 1]
- core2[IBM PowerPC Broadway Core 2]
-
- rom[16 KB ROM]
-
- core0 --- core2
-
- rom --> core2
- end
-
- subgraph amd[AMD Latte GPU]
- mem[Memory & I/O Bridge]
- dram[DRAM Controller]
- edram[32 MB EDRAM MEM1]
- rom[512 B SEEPROM]
-
- sata[SATA IF]
- exi[EXI]
-
- subgraph gx[GX]
- sram[3 MB 1T-SRAM]
- end
-
- radeon[AMD Radeon R7xx GX2]
-
- mem --- gx
- mem --- radeon
-
- rom --- mem
-
- mem --- sata
- mem --- exi
-
- dram --- sata
- dram --- exi
- end
-
- ddr3[2 GB DDR3 RAM MEM2]
-
- mem --- ddr3
- dram --- ddr3
- edram --- ddr3
-
- core1 --- mem
-
- exi --- rtc
- rtc{{rtc}}
-
-sequenceDiagram
- Customer->>+Stripe: Makes a payment request
- Stripe->>+Bank: Forwards the payment request to the bank
- Bank->>+Customer: Asks for authorization
- Customer->>+Bank: Provides authorization
- Bank->>+Stripe: Sends a response with payment details
- Stripe->>+Merchant: Sends a notification of payment receipt
- Merchant->>+Stripe: Confirms the payment
- Stripe->>+Customer: Sends a confirmation of payment
- Customer->>+Merchant: Receives goods or services
-
-
-mindmap
- root((mindmap))
- Origins
- Long history
- ::icon(fa fa-book)
- Popularisation
- British popular psychology author Tony Buzan
- Research
- On effectiveness and features
- On Automatic creation
- Uses
- Creative techniques
- Strategic planning
- Argument mapping
- Tools
- Pen and paper
- Mermaid
-