Diagram/Kroki/Mermaid: Difference between revisions

From Chorke Wiki
Jump to navigation Jump to search
No edit summary
Line 32: Line 32:
{|class='wikitable mw-collapsible' style='width:100%;margin:3px 0'
{|class='wikitable mw-collapsible' style='width:100%;margin:3px 0'
!scope='col' style='text-align:left' colspan='2'|
!scope='col' style='text-align:left' colspan='2'|
Kroki » Install
Mermaid » Graph
|-
|-
|valign='top' style='width:50%'|
|valign='top' style='width:50%'|
Line 62: Line 62:
   B --> C[Kroki]
   B --> C[Kroki]
   C --> D[Mermaid Renderer]
   C --> D[Mermaid Renderer]
MMD
)"
setsid open https://kroki.shahed.biz.ops/mermaid/svg/${BASE64_SCHEME} >/dev/null 2>&1 &
</syntaxhighlight>
|}
==Mermaid » Flowchart==
{|class='wikitable mw-collapsible mw-collapsed' style='width:100%;margin:3px 0'
!scope='col' style='text-align:left' colspan='2'|
Mermaid » Flowchart
|-
|valign='top' style='width:50%'|
<syntaxhighlight style='margin:3px 0' lang='yaml'>
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 &
</syntaxhighlight>
|valign='top' style='width:50%'|
<syntaxhighlight style='margin:3px 0' lang='yaml'>
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
MMD
)"
)"

Revision as of 08:17, 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 &
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 &

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 &

References

References