Widget:Graph

Dokumentace

Tato dokumentace je sem přenesena z podstránky Widget:Graph/doc. (historie/editace)

https://docs.mermaidchart.com/mermaid/intro

• Graf, podobný následujcímu vzniká propojením nodů – uzlů, které definuje řetezec node_name za kterým je v hranaté závorce uveden jeho obsah: node_name[Node text]
• Propojená nodů se vygeneruje na základě sekvence -->
• Propojovací sekvenci lze modifikovat
• Spojení, nebo rozdělení více nodů do jednoho zajistí ampresand &
• Propojení lze popisovat. A to tak, že se řetězec, který popisuje propojení, umístí mezi svislítka. Svislítko ale systém MediaWiki interpretuje jako oddělovač proměnných. Proto je potřeba místo něj použít šablonu {{!}}

Následující příklad je graf je typu flowchar LR (left->right). Mají-li položky jít shora dolů, použije se TD (top->down)

flowchart LR

G & H & I --> A

 A[Start]-->B[Do you have coffee beans?]
 B-->|Yes|C[Grind the coffee beans]
 B-->|No|D[Buy ground coffee beans]
 C-->E[Add coffee grounds to filter]
 D-->E
 E-->F[Add hot water to filter]
 F-->G[Enjoy!]

• Odsazení a mezery hrají roli. Následující graf je typu kanban:

---
config:
  kanban:
    ticketBaseUrl: 'https://www.thewoodcraft.org/wiki/index.php/#TICKET#'
---
kanban
Todo
  [Udělat dokumentaci]
    docs[Sepsat postup ohledně zpracování]
[Ve stadiu zpracování]
    id6[Nejprve vytvořit s využitím náhledů nový graf.
Změny uložit teprve když je hotov.
V položce je možné aplikovat __markdown__ syntaxi, ale…
<big><b>fungují i šablony</b></big>]
id9[Prioritizace položek]
    id8[Tikety lze přiřazovat a prioritizovat. Prirorita tiketu může mít hodnotu: 'Very Low', 'Low', 'High', 'Very High' a pro lepší čitelnost je vhodné parametry tiketu uzavřít do uvozovek.]@{ assigned: 'Keny' }
id10[Tikety ke zpracování]
    id4[Jak založit tiket]@{ ticket: MC-2038, assigned: 'Keny', priority: 'High' }
    id66[Zcela nedůležitý tiket]@{ priority: 'Very Low', assigned: 'Keny' }
id11[Hotovo]
    id5[normání tiket bez priority a přiřazení]
    id2[Tiket, který vede na uživatelskou wiki stránku]@{ ticket: User:Keny, priority: 'Very High'}
    id3[Přiřazený tiket]@{ ticket: Marcus Woodward, assigned: Keny, priority: 'High' }

id12[Vyřazené tikety]
    id3[Mohou mít shodné ID, protože to se vztahuje vždy k příslušné kategorii]

• Lze generovat i tzv. „myšlenkové mapy” mindmap

mindmap
    id1["`**Root** with
a second line
Unicode works too: 🤓`"]
      id2["`The dog in **the** hog... a *very long text* that wraps to a new line`"]
      id3[Regular labels still works]

Problémy mohou dělat grafy, které pracují se znakem =, např. zenuml

Pokud chcete vygenrované SVG upravit v aplikaci Inkscape, je potřeba udělat v kódu malou opravu. Nahradit root{--mermaid-font-family za root{mermaid-font-family. Udělat to lze např. pomocí aplikace sed: $ sed -i 's/--mermaid-font-family/mermaid-font-family/g' ulozeny_graf.svg https://github.com/mermaid-js/mermaid/issues/2102#issuecomment-2508677541