Diagram Design

Vytvořeno: 18.8.2026 | Aktualizováno: 18.08.2026 09:45

Diagram Design je skill pro AI agenty Claude Code, Codex a Pi, který vytváří diagramy jako samostatné HTML soubory s vloženým SVG. Slouží pro tvorbu architektonických diagramů, vývojových diagramů, sekvenčních diagramů, datových modelů a dalších technických i redakčních vizualizací bez ruční práce ve Figmě.

Projekt není samostatný grafický editor. Jde především o sadu instrukcí, šablon a kontrolních skriptů, které si agent načte při požadavku na diagram a podle nich připraví výstup.

• Obsahuje 27 typů vizualizací, například architekturu, flowchart, sekvenční diagram, stavový automat, ER model, časovou osu, Ganttův diagram nebo datový tok.
• Výchozím výstupem je statický HTML soubor s SVG bez build kroku a bez závislosti na JavaScriptu. V prohlížeči se dá otevřít přímo jako soubor.
• Diagram je možné vyexportovat do SVG nebo PNG.
• Umí přepracovat existující diagram z draw.io nebo Mermaid do vlastního vizuálního stylu. Při úpravě se zachovává obsah, vazby a skupiny; původní souřadnice, barvy a automatické rozložení se nepřenášejí.

Skill nejdříve volí sémantiku a typ diagramu, například zda jde o tok rozhodování, architekturu nebo komunikaci v čase. Teprve potom načítá podklady pro konkrétní typ a vytvoří diagram ze šablony. Běžný výstup proto agentovi nenačítá celou knihovnu 27 typů najednou.

Vizuální pravidla omezují počet zvýrazněných prvků, používají jeden akcentní odstín, jemné okraje a pevný rozestup prvků. Cílem je omezit generické diagramy s mnoha zaoblenými boxy a náhodnými barvami.

Pro Claude Code se projekt instaluje jako plugin z jeho marketplace:

/plugin marketplace add cathrynlavery/diagram-design
/plugin install diagram-design@diagram-design

Codex používá obdobný postup:

codex plugin marketplace add cathrynlavery/diagram-design
codex plugin add diagram-design@diagram-design

Pro Pi je k dispozici instalace z Git repozitáře:

pi install https://github.com/cathrynlavery/diagram-design

Po instalaci stačí agentovi popsat požadovaný obsah. Příklady zadání:

Vytvoř architektonický diagram aplikace: frontend, backend, databáze a Redis cache.

Vytvoř sekvenční diagram volání s bearer tokenem a obnovením tokenu po odpovědi 401.

Pro import existující předlohy jsou k dispozici příkazy pro draw.io a Mermaid. Import není prostý převod formátu: agent diagram znovu nakreslí pro zvolený formát, velikost, úroveň detailu a publikum.

Před prvním diagramem může skill načíst úvodní stránku webu a navrhnout barvy a písma odpovídající značce. Ukládá je do stylového průvodce nebo do pojmenovaného profilu pro více projektů. Před zápisem má ověřit kontrast textu vůči pozadí podle WCAG AA.

Pokud se styl značky nenastaví, použije se výchozí vzhled projektu. Pro jednorázový technický diagram to stačí; pro dokumentaci nebo materiály konkrétního klienta dává smysl profil nastavit.

Diagram Design negeneruje ani neověřuje faktickou správnost architektury, procesu nebo datového modelu. Agentovi poskytuje způsob, jak obsah vizuálně uspořádat; zdrojová data, vztahy a výsledný diagram je potřeba zkontrolovat.

Na jednoduchý seznam, srovnání před a po nebo jediný popsaný prvek je vhodnější tabulka, odrážky nebo věta. Projekt sám doporučuje diagram použít jen tehdy, když čtenáři předá více než dobře napsaný odstavec.

• Diagram Design – GitHub repozitář a dokumentace