Creating UML / Graphs with Mermaid

Milan Martiniak

• 2 min read
Creating UML / Graphs with Mermaid

Ako vy kreslite UML diagramy alebo grafy? Kreslíte? U nás ani moc nie, ale občas sa to zíde a je fajn mať fungovanie nejakej časti systému popísané napríklad sekvenčným diagramom.
V minulosti som používal draw.io. Super nástroj, ale bol s tým štandardný problém. Ako uchovávať diagramy? Ako ich pridávať do dokumentácie? Ako ich zdieľať? A najväčší problém ako ich dodatočne upravovať 🤔?
Párkrát som využil PlantUML, ktorý to presne riešil. Jednoducho diagram vytvorím pomocou textu priamo v markdown-e a tool za mňa na tom mieste vyrenderuje obázok. Za mňa je to super riešenie.

Objavil som však Mermaid. Rovnaká myšlienka, ale vzhľadom na to kde a ako je všade integrovaná, tak pre mňa výrazne lepšia voľba.

sequenceDiagram
    participant Author
    participant Notion
    participant Blog1 as blog.burgyn.online
    participant Blog2 as blog.vyvojari.dev
    participant Social as Social media

    Author->>Notion: Record ideas for articles
    Author->>Notion: Select an idea to write about
    Author->>Author: Write the basic structure of the article
    Note right of Author: Drink lots of coffee!
    Author->>Author: Insert images and diagrams
    Author->>Author: Check grammar and style
    Author->>Blog1: Publish the article
    Author->>Blog2: Publish the article
    Author->>Author: Create graphic material
    Author->>Social: Share the article from blog.burgyn.online
    Note right of Author: Wait for feedback!
Milan Martiniak blog post creating proces

Výhody pre mňa:

  • jednoduché použitie priamo v markdown-e
    • tým pádom je to súčasťou dokumentácie, issues, ...
    • natívna podpora git (verziovanie, zdieľanie, ...)
    • následná editácia
  • možnosť vytvárať rôzne typy diagramov (flowchart, sequence, class, state, ...)
  • rôzne integrácie
    • Notion
    • GitHub
    • Jekyll (ja som použil jekyll-mermaid)
    • VsCode
    • AZURE DevOps (zatiaľ len Wiki)
    • ChatGPT 🤣
    • ...
    • ?? vyvojari.dev ?? Čo ty na to Vlko? neskúsiš podprotiť?

Plugin pre ChatGPT. Diagram vyššie som vytvoril jednoduchým promptom do ChatGPT:

Idem písať článok práve o Mermaid. Vytvor mi nejaký zaujímavý sekvenčný diagram o tom ako sa píše takýto blog post. Myšlienky zapisujem do Notion, post zverejňujem na blog.burgyn.online a blog.vyvojari.dev. Nasledne robím o tom post na social media.