Diagram/Kroki/Mermaid: Difference between revisions

From Chorke Wiki
Jump to navigation Jump to search
VisualWikitext
Created page with "==References== {|class='wikitable mw-collapsible' style='width:100%;margin:3px 0' !scope='col' style='text-align:left' colspan='3'| References |- |valign='top' style='width:34%'| * Diagram » Kroki * Helm » Kroki * Helm |valign='top' style='width:33%'| |valign='top' style='width:33%'| |}"
 
No edit summary
 
(20 intermediate revisions by the same user not shown)
Line 1: Line 1:
{|class='wikitable' style='width:50%'
|valign='top'|
<syntaxhighlight lang='yaml'>
cat <<'YML' | tee ${HOME}/kroki.yml >/dev/null
---
endpoint: https://kroki.shahed.biz.ops
timeout: 30s
YML
</syntaxhighlight>
|}
==Mermaid » Theme==
{|class='wikitable' style='width:50%'
!scope="col" style='width:30%'| Name
!scope="col" style='width:50%'| Description
!scope="col" style='width:20%'| Recommended
|-
| default    || Standard Mermaid theme ||style='text-align:center'| 🟡
|-
| forest    || Green / earthy style  ||style='text-align:center'| 🟢
|-
| dark      || Dark background        ||style='text-align:center'| 🟠
|-
| neutral    || Light, neutral colors  ||style='text-align:center'| 🟢
|-
| base      || Minimal base style    ||style='text-align:center'| 🟠
|-
| redux      || Redux-style flowchart  ||style='text-align:center'| 🟡
|}
==Mermaid » Graph==
{|class='wikitable mw-collapsible'
!scope='col' style='text-align:left' colspan='2'|
Mermaid » Graph
|-
|valign='top' style='width:50%'|
<syntaxhighlight lang='yaml'>
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 &
</syntaxhighlight>
|valign='top' style='width:50%'|
<syntaxhighlight lang='yaml'>
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 &
</syntaxhighlight>
|}
==Mermaid » Flowchart==
{|class='wikitable mw-collapsible mw-collapsed'
!scope='col' style='text-align:left' colspan='2'|
Mermaid » Flowchart
|-
|valign='top' style='width:50%'|
<syntaxhighlight 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 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
)"
setsid open https://kroki.shahed.biz.ops/mermaid/svg/${BASE64_SCHEME} >/dev/null 2>&1 &
</syntaxhighlight>
|-
|valign='top' style='width:50%'|
<syntaxhighlight lang='yaml'>
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 &
</syntaxhighlight>
|valign='top' style='width:50%'|
<syntaxhighlight lang='yaml'>
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 &
</syntaxhighlight>
|}
==Mermaid » ClassDiagram==
{|class='wikitable mw-collapsible mw-collapsed'
!scope='col' style='text-align:left' colspan='2'|
Mermaid » ClassDiagram
|-
|valign='top' style='width:50%'|
<syntaxhighlight lang='yaml'>
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 &
</syntaxhighlight>
|valign='top' style='width:50%'|
<syntaxhighlight lang='yaml'>
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 &
</syntaxhighlight>
|}
==References==
==References==
{|class='wikitable mw-collapsible' style='width:100%;margin:3px 0'
{|class='wikitable mw-collapsible'
!scope='col' style='text-align:left' colspan='3'|
!scope='col' style='text-align:left' colspan='3'|
References
References
|-
|-
|valign='top' style='width:34%'|
|valign='top' style='width:33%'|
* [https://mermaid.js.org/syntax/timeline.html Mermaid » Chart » Timeline]
* [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/config/configuration.html Mermaid » Chart » Config]
* [https://mermaid.js.org/config/math.html Mermaid » Chart » Math]
* [https://www.mermaidchart.com/play Mermaid » Chart » Play]
* [https://mermaid.live/edit Mermaid » Chart » Edit]
* [[Diagram/Kroki|Diagram » Kroki]]
* [[Diagram/Kroki|Diagram » Kroki]]
* [[Helm/Kroki|Helm » Kroki]]
* [[Helm/Kroki|Helm » Kroki]]
* [[Helm]]
* [[Diagram]]
 
|valign='top' style='width:34%'|
* [https://mermaid.js.org/syntax/requirementDiagram.html Mermaid » Chart » Requirement]
* [https://mermaid.js.org/syntax/flowchart.html Mermaid » Chart » Flowcharts]
* [https://mermaid.js.org/syntax/quadrantChart.html Mermaid » Chart » Quadrant]
* [https://mermaid.js.org/syntax/examples.html Mermaid » Chart » Examples]
* [https://mermaid.js.org/syntax/mindmap.html Mermaid » Chart » Mindmap]
* [https://mermaid.js.org/syntax/timeline.html Mermaid » Chart » Timeline]
* [https://mermaid.js.org/syntax/radar.html Mermaid » Chart » Radar]


|valign='top' style='width:33%'|
|valign='top' style='width:33%'|
* [https://github.com/CptLausebaer/mediawiki-kroki-extension/releases MediaWiki » Extension » Kroki » Releases]
* [https://www.mediawiki.org/wiki/Extension:Kroki MediaWiki » Extension » Kroki]
* [[Special:Version|MediaWiki » Version]]
|-
|valign='top'|
* [https://github.com/stakater/Reloader/blob/master/README.md#-how-it-works Mermaid » Ex » Reloader]


|valign='top' style='width:33%'|
|valign='top'|


|valign='top'|
|}
|}

Latest revision as of 03:01, 25 January 2026

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

Retrieved from "https://wiki.chorke.org/index.php?title=Diagram/Kroki/Mermaid&oldid=16422"