Diagram/Kroki/Mermaid: Difference between revisions
Jump to navigation
Jump to search
| Line 231: | Line 231: | ||
|- | |- | ||
|valign='top' style='width:33%'| | |valign='top' style='width:33%'| | ||
* [https://mermaid.js.org/config/theming.html Mermaid » Chart » Theme] | |||
* [https://mermaid.js.org/intro/syntax-reference.html Mermaid » Chart » Syntax] | * [https://mermaid.js.org/intro/syntax-reference.html Mermaid » Chart » Syntax] | ||
* [https://mermaid.js.org/config/math.html Mermaid » Chart » Math] | |||
* [https://www.mermaidchart.com/play Mermaid » Chart » Play] | * [https://www.mermaidchart.com/play Mermaid » Chart » Play] | ||
* [https://mermaid.live/edit Mermaid » Chart » Edit] | * [https://mermaid.live/edit Mermaid » Chart » Edit] | ||
Revision as of 14:56, 23 December 2025
cat <<'YML' | tee ${HOME}/kroki.yml >/dev/null
---
endpoint: https://kroki.shahed.biz.ops
timeout: 30s
YML
|
Mermaid » Theme
| Name | Description | Recommended |
|---|---|---|
| default | Standard Mermaid theme | 🟡 |
| forest | Green / earthy style | 🟢 |
| dark | Dark background | 🟠 |
| neutral | Light, neutral colors | 🟢 |
| base | Minimal base style | 🟠 |
| redux | Redux-style flowchart | 🟡 |
Mermaid » Graph
|
Mermaid » Graph | |
|---|---|
BASE64_SCHEME="$(cat <<-'MMD' | kroki encode /dev/stdin
---
config:
theme: forest
---
graph TD
A[Client] --> B[Ingress]
B --> C[Kroki]
C --> D[Mermaid Renderer]
MMD
)"
setsid open https://kroki.shahed.biz.ops/mermaid/svg/${BASE64_SCHEME} >/dev/null 2>&1 &
setsid open https://kroki.io/mermaid/svg/${BASE64_SCHEME} >/dev/null 2>&1 &
|
BASE64_SCHEME="$(cat <<-'MMD' | kroki encode -
---
config:
theme: neutral
---
graph TD
A[Client] --> B[Ingress]
B --> C[Kroki]
C --> D[Mermaid Renderer]
MMD
)"
setsid open https://kroki.shahed.biz.ops/mermaid/svg/${BASE64_SCHEME} >/dev/null 2>&1 &
setsid open https://kroki.io/mermaid/svg/${BASE64_SCHEME} >/dev/null 2>&1 &
|
Mermaid » Flowchart
|
Mermaid » Flowchart | |
|---|---|
BASE64_SCHEME="$(cat <<-'MMD' | kroki encode /dev/stdin
---
config:
theme: default
---
flowchart TD
A(["Start"])
A --> B{"Decision"}
B --> C["Option A"]
B --> D["Option B"]
MMD
)"
setsid open https://kroki.shahed.biz.ops/mermaid/svg/${BASE64_SCHEME} >/dev/null 2>&1 &
|
BASE64_SCHEME="$(cat <<-'MMD' | kroki encode -
---
config:
theme: dark
---
flowchart TD
A(["Start"])
A --> B{"Decision"}
B --> C["Option A"]
B --> D["Option B"]
MMD
)"
setsid open https://kroki.shahed.biz.ops/mermaid/svg/${BASE64_SCHEME} >/dev/null 2>&1 &
|
BASE64_SCHEME="$(cat <<-'MMD' | kroki encode /dev/stdin
---
config:
theme: forest
---
flowchart TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
MMD
)"
setsid open https://kroki.shahed.biz.ops/mermaid/svg/${BASE64_SCHEME} >/dev/null 2>&1 &
|
BASE64_SCHEME="$(cat <<-'MMD' | kroki encode -
---
config:
theme: neutral
---
flowchart TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
MMD
)"
setsid open https://kroki.shahed.biz.ops/mermaid/svg/${BASE64_SCHEME} >/dev/null 2>&1 &
|
Mermaid » ClassDiagram
|
Mermaid » ClassDiagram | |
|---|---|
BASE64_SCHEME="$(cat <<-'MMD' | kroki encode /dev/stdin
---
config:
theme: forest
---
classDiagram
Animal <|-- Duck
Animal <|-- Fish
Animal <|-- Zebra
Animal : +int age
Animal : +String gender
Animal: +isMammal()
Animal: +mate()
class Duck{
+String beakColor
+swim()
+quack()
}
class Fish{
-int sizeInFeet
-canEat()
}
class Zebra{
+bool is_wild
+run()
}
MMD
)"
setsid open https://kroki.shahed.biz.ops/mermaid/svg/${BASE64_SCHEME} >/dev/null 2>&1 &
|
BASE64_SCHEME="$(cat <<-'MMD' | kroki encode -
---
config:
theme: neutral
---
classDiagram
Animal <|-- Duck
Animal <|-- Fish
Animal <|-- Zebra
Animal : +int age
Animal : +String gender
Animal: +isMammal()
Animal: +mate()
class Duck{
+String beakColor
+swim()
+quack()
}
class Fish{
-int sizeInFeet
-canEat()
}
class Zebra{
+bool is_wild
+run()
}
MMD
)"
setsid open https://kroki.shahed.biz.ops/mermaid/svg/${BASE64_SCHEME} >/dev/null 2>&1 &
|
References
|
References | ||
|---|---|---|