Diagram/Kroki/Mermaid: Difference between revisions

From Chorke Wiki
Jump to navigation Jump to search
← Older edit
VisualWikitext
No edit summary
 
Line 1: Line 1:
{|class='wikitable' style='width:50%;margin:-11px 0 6px 0'
{|class='wikitable' style='width:50%'
|valign='top'|
|valign='top'|
<syntaxhighlight style='margin:3px 0' lang='yaml'>
<syntaxhighlight lang='yaml'>
cat <<'YML' | tee ${HOME}/kroki.yml >/dev/null
cat <<'YML' | tee ${HOME}/kroki.yml >/dev/null
---
---
Line 11: Line 11:


==Mermaid » Theme==
==Mermaid » Theme==
{|class='wikitable' style='width:50%;margin:3px 0'
{|class='wikitable' style='width:50%'
!scope="col" style='width:30%'| Name
!scope="col" style='width:30%'| Name
!scope="col" style='width:50%'| Description
!scope="col" style='width:50%'| Description
Line 30: Line 30:


==Mermaid » Graph==
==Mermaid » Graph==
{|class='wikitable mw-collapsible' style='width:100%;margin:3px 0'
{|class='wikitable mw-collapsible'
!scope='col' style='text-align:left' colspan='2'|
!scope='col' style='text-align:left' colspan='2'|
Mermaid » Graph
Mermaid » Graph
|-
|-
|valign='top' style='width:50%'|
|valign='top' style='width:50%'|
<syntaxhighlight style='margin:3px 0' lang='yaml'>
<syntaxhighlight lang='yaml'>
BASE64_SCHEME="$(cat <<-'MMD' | kroki encode /dev/stdin
BASE64_SCHEME="$(cat <<-'MMD' | kroki encode /dev/stdin
---
---
Line 53: Line 53:


|valign='top' style='width:50%'|
|valign='top' style='width:50%'|
<syntaxhighlight style='margin:3px 0' lang='yaml'>
<syntaxhighlight lang='yaml'>
BASE64_SCHEME="$(cat <<-'MMD' | kroki encode -
BASE64_SCHEME="$(cat <<-'MMD' | kroki encode -
---
---
Line 72: Line 72:


==Mermaid » Flowchart==
==Mermaid » Flowchart==
{|class='wikitable mw-collapsible mw-collapsed' style='width:100%;margin:3px 0'
{|class='wikitable mw-collapsible mw-collapsed'
!scope='col' style='text-align:left' colspan='2'|
!scope='col' style='text-align:left' colspan='2'|
Mermaid » Flowchart
Mermaid » Flowchart
|-
|-
|valign='top' style='width:50%'|
|valign='top' style='width:50%'|
<syntaxhighlight style='margin:3px 0' lang='yaml'>
<syntaxhighlight lang='yaml'>
BASE64_SCHEME="$(cat <<-'MMD' | kroki encode /dev/stdin
BASE64_SCHEME="$(cat <<-'MMD' | kroki encode /dev/stdin
---
---
Line 95: Line 95:


|valign='top' style='width:50%'|
|valign='top' style='width:50%'|
<syntaxhighlight style='margin:3px 0' lang='yaml'>
<syntaxhighlight lang='yaml'>
BASE64_SCHEME="$(cat <<-'MMD' | kroki encode -
BASE64_SCHEME="$(cat <<-'MMD' | kroki encode -
---
---
Line 113: Line 113:
|-
|-
|valign='top' style='width:50%'|
|valign='top' style='width:50%'|
<syntaxhighlight style='margin:3px 0' lang='yaml'>
<syntaxhighlight lang='yaml'>
BASE64_SCHEME="$(cat <<-'MMD' | kroki encode /dev/stdin
BASE64_SCHEME="$(cat <<-'MMD' | kroki encode /dev/stdin
---
---
Line 132: Line 132:


|valign='top' style='width:50%'|
|valign='top' style='width:50%'|
<syntaxhighlight style='margin:3px 0' lang='yaml'>
<syntaxhighlight lang='yaml'>
BASE64_SCHEME="$(cat <<-'MMD' | kroki encode -
BASE64_SCHEME="$(cat <<-'MMD' | kroki encode -
---
---
Line 152: Line 152:


==Mermaid » ClassDiagram==
==Mermaid » ClassDiagram==
{|class='wikitable mw-collapsible mw-collapsed' style='width:100%;margin:3px 0'
{|class='wikitable mw-collapsible mw-collapsed'
!scope='col' style='text-align:left' colspan='2'|
!scope='col' style='text-align:left' colspan='2'|
Mermaid » ClassDiagram
Mermaid » ClassDiagram
|-
|-
|valign='top' style='width:50%'|
|valign='top' style='width:50%'|
<syntaxhighlight style='margin:3px 0' lang='yaml'>
<syntaxhighlight lang='yaml'>
BASE64_SCHEME="$(cat <<-'MMD' | kroki encode /dev/stdin
BASE64_SCHEME="$(cat <<-'MMD' | kroki encode /dev/stdin
---
---
Line 191: Line 191:


|valign='top' style='width:50%'|
|valign='top' style='width:50%'|
<syntaxhighlight style='margin:3px 0' lang='yaml'>
<syntaxhighlight lang='yaml'>
BASE64_SCHEME="$(cat <<-'MMD' | kroki encode -
BASE64_SCHEME="$(cat <<-'MMD' | kroki encode -
---
---
Line 226: Line 226:


==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
Line 256: Line 256:
* [[Special:Version|MediaWiki » Version]]
* [[Special:Version|MediaWiki » Version]]


|-
|valign='top'|
* [https://github.com/stakater/Reloader/blob/master/README.md#-how-it-works Mermaid » Ex » Reloader]
|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"