====== Sketchy – interaktivní diagramy pro AI asistenty ======

//Vytvořeno: **3.11.2026** | Aktualizováno: **~~LASTMOD~~**//

[[https://github.com/ddkbs/sketchy|Sketchy]] je open-source nástroj, který pomáhá AI asistentovi vytvářet interaktivní diagramy, nákresy elektronických zapojení a vizuální vysvětlení. Nabízí skill pro chat a samostatný MCP server pro coding prostředí. Hodí se například pro vysvětlení struktury repozitáře nebo pro nákres zapojení podle Arduino sketche.

===== Jak Sketchy funguje =====

Sketchy není samotný AI asistent. Rozdělení práce vypadá takto:

  - AI asistent přečte zadání a dostupné soubory. Určí, jaké prvky, propojení a popisky mají být na obrázku.
  - Sketchy dostane popis scény. Automaticky rozmístí její prvky, vede spojnice a obrázek vykreslí.
  - Uživatel ověří, že výsledný diagram odpovídá projektu nebo skutečnému zapojení.

Asistent popisuje obsah diagramu, nikoli přesné souřadnice prvků. Sketchy se stará o rozložení a jednotný vzhled. Při následných úpravách může zachovat identifikátory prvků a jejich předchozí umístění, aby šly verze snadněji porovnat.

V podporovaném prostředí lze nad prvky zobrazit podrobnosti, projít vysvětlení po krocích a výsledek exportovat do SVG nebo PNG. Některé možnosti závisí na použitém klientovi a způsobu instalace.

===== Skill a MCP server =====

Sketchy nabízí dva způsoby použití. Není nutné instalovat oba současně.

^ Varianta ^ Jak funguje ^ Typické použití ^
| Skill | Instrukce vedou asistenta k sestavení scény a vykreslení pomocí kódu Sketchy. | Diagramy přímo v podporovaném chatu. |
| MCP server | Samostatný program poskytuje asistentovi nástroje pro sestavení diagramu a práci se součástkami. | Coding prostředí a práce s lokálním projektem. |

[[https://github.com/ddkbs/sketchy/blob/main/skill/SKILL.md|Instrukce skillu]] používají v běžném chatu vloženou vizualizaci, která načte vykreslovací JavaScript. Popisují také náhradní postup pro vytvoření samostatné HTML stránky pomocí přiloženého skriptu a Node.js. Skill tedy není jen instrukce: používá i kreslicí kód Sketchy.

MCP server je naproti tomu běžící program, který asistentovi nabízí nástroje. Pro interaktivní zobrazení v jiném MCP klientovi je potřeba podpora [[https://github.com/modelcontextprotocol/ext-apps|MCP Apps]]; samotná podpora MCP nemusí stačit.

===== Možnosti použití =====

==== Arduino a ESP32 ====

Sketchy umí zobrazit desku, součástky a propojení pinů. Asistent může vycházet ze souboru ''.ino'' a hledat například použití ''pinMode'' nebo ''digitalWrite''. Grafické podoby součástek a jejich piny pocházejí z knihovny [[https://github.com/wokwi/wokwi-elements|Wokwi Elements]]. Podle dokumentace Sketchy nabízí 50 typů desek, senzorů, displejů a dalších prvků.

Praktický postup pro existující projekt:

  - Zpřístupni asistentovi ''.ino'' soubor a případné další soubory s definicemi pinů.
  - Přidej dokumentaci projektu nebo vlastní seznam součástek a jejich zapojení.
  - Nech asistenta vytvořit diagram a vypsat údaje, které ze souborů nedokáže zjistit.
  - Výsledek porovnej se skutečným zařízením a dokumentací použitých modulů.

Příklad zadání:

<code>
Prozkoumej tento projekt a pomocí Sketchy nakresli zapojení
mikrokontroléru a připojených součástek.

U každého vodiče uveď označení pinu. Rozliš informace, které jsou
přímo uvedené v kódu nebo dokumentaci, od toho, co ze souborů
nelze zjistit. Nevymýšlej napájení ani hodnoty součástek.
Nejasnosti vypiš pod obrázek.
</code>

**Omezení:** Kód nemusí popisovat celé fyzické zapojení. Použitý pin sám o sobě nedokládá napájecí napětí, hodnotu rezistoru ani přítomnost dalších součástek. Sketchy není důkaz elektrické správnosti a nenahrazuje kontrolu parametrů desky a modulů. Nákres také není simulací obvodu ani návrhem desky plošných spojů.

==== Struktura softwarového projektu ====

Asistent může podle souborů repozitáře nakreslit moduly, adresáře a vztahy mezi nimi. V podporovaném prostředí lze kliknutím na blok otevřít odpovídající soubor v editoru. To pomáhá při seznamování s projektem nebo při návratu ke staršímu kódu.

<code>
Projdi tento repozitář a nakresli jeho hlavní části. U každé uveď,
za co odpovídá, a zobraz hlavní tok dat. Nevymýšlej vazby,
které nedokážeš doložit v kódu.
</code>

==== Infrastruktura a služby ====

Sketchy lze použít pro vizualizaci služeb, sítí a toku požadavků. Například může zobrazit cestu od prohlížeče přes reverzní proxy k aplikaci a databázi. Jako podklad mohou sloužit konfigurační soubory nebo vlastní dokumentace.

<code>
Podle těchto Docker Compose souborů nakresli služby, jejich propojení
 a vystavené porty. Odliš vazby doložené konfigurací od nejasností.
</code>

Diagram vychází z dostupných podkladů. Nemusí zachytit skutečný stav běžící sítě, pravidla firewallu ani ruční změny mimo poskytnuté soubory.

==== Smart home a automatizace ====

Diagram může vysvětlit tok události od senzoru přes MQTT nebo Home Assistant k výsledné akci. Postupné zvýrazňování kroků se hodí pro pochopení spouštěče, podmínek a následných akcí.

<code>
Projdi tuto automatizaci Home Assistantu. Nakresli spouštěč,
podmínky a akce. Potom krok za krokem vysvětli, co se stane
při detekci pohybu.
</code>

==== Vysvětlení a porovnání ====

Sketchy podporuje diagramy struktury, toků a srovnání. Hodí se například pro cestu webového požadavku, vysvětlení cache nebo porovnání TCP a UDP. U složitějšího procesu může asistent připravit posloupnost kroků a postupně zvýrazňovat příslušné prvky.

Pro jiný přístup k tvorbě technických diagramů existuje také [[ai:generovani-obrazu:diagram-design|Diagram Design]], skill zaměřený na tvorbu diagramů jako HTML a SVG.

==== Popisování fotografií ====

Sketchy může použít fotografii z volně licencovaných zdrojů a označit na ní části nebo tištěný text. Dokumentace uvádí například označení konektorů na fotografii Raspberry Pi nebo částí desky Arduino. Původ a licence fotografie se zobrazují u obrázku.

Popisování fotografie je jiná úloha než nákres zapojení: model hledá, **kde se položka nachází na fotografii**. Pro tento účel Sketchy používá samostatný lokální obrazový model.

===== Modely Small, Medium a Large =====

Varianty Small, Medium a Large označují obrazové modely založené na [[https://huggingface.co/microsoft/Florence-2-base-ft|Florence-2]], které hledají součástky a text na fotografii. Nejde o velikosti AI asistenta ani o modely potřebné pro běžné diagramy a nákresy zapojení. Model se stahuje odděleně při prvním použití této funkce.

^ Varianta ^ Přibližné stažení ^ Přibližná RAM ^ Zaměření podle autora ^
| Small | 280 MB | 1 GB | Tištěný text a výrazné součástky. |
| Medium | 830 MB | 2,5 GB | Lepší lokalizace malých součástek. |
| Large | 3,1 GB | 4,5 GB | Nejpřesnější varianta s vyššími nároky. |

Podle [[https://github.com/ddkbs/sketchy/blob/main/src/photos/models.ts|definice modelů ve zdrojovém kódu]] používá Small menší variantu modelu ve formátu ''q8''. Medium a Large používají větší variantu; Medium ve formátu ''q8'' a Large v plné přesnosti ''fp32''. Údaje o velikosti jsou orientační; zdrojový kód uvádí měření na macOS s ARM procesorem.

Pro první pokus s fotografiemi doporučuje autor Small. Zdrojový kód zároveň uvádí, že v desktopové aplikaci Claude nejsou Medium a Large kvůli omezení běhového prostředí dostupné; pro větší modely odkazuje na Claude Code v terminálu.

===== Instalace a připojení =====

==== Skill pro chat ====

  - Stáhni ''sketchy-skill-<version>.zip'' ze [[https://github.com/ddkbs/sketchy/releases/latest|stránky posledního vydání]].
  - V Claude otevři **Settings → Capabilities → Skills** a nahraj ZIP.
  - V chatu požádej o diagram nebo nahraj soubor s projektem a popiš, co má obrázek zobrazovat.

Běžná varianta skillu načítá vykreslovací balíček z [[https://www.jsdelivr.com/|jsDelivr]] a podle autora průběžně získává opravy v rámci dané minor verze. Varianta ''pinned'' odkazuje na konkrétní commit a kontroluje integritu načteného souboru; pro aktualizaci je potřeba nahrát nový ZIP.

==== Claude desktop ====

Pro záložku **Code** autor nabízí balíček ''.mcpb'' na stránce vydání. Po otevření balíčku nebo jeho přidání přes **Settings → Extensions** lze rozšíření potvrdit a případně nastavit editor a datový adresář.

Podle dokumentace záložka **Chat** nezobrazuje interaktivní výstupy z lokálních rozšíření. Pro běžný chat se proto používá skill. Dostupnost instalačních balíčků je potřeba ověřit pro konkrétní operační systém a architekturu.

==== Claude Code v terminálu ====

Pro sestavení projektu je podle autora potřeba Node.js 20 nebo novější. Následující postup zaregistruje server pro uživatele, tedy pro použití ve více projektech:

<code bash>
git clone https://github.com/ddkbs/sketchy.git
cd sketchy
npm install
npm run build
claude mcp add sketchy --scope user -- node "$PWD/dist/index.js"
claude mcp list
</code>

Adresář s repozitářem musí zůstat na místě, protože registrace odkazuje na sestavený soubor ''dist/index.js''. Před připojením cizího MCP serveru je vhodné zkontrolovat jeho kód a oprávnění: běží jako lokální program pod účtem uživatele.

==== Ostatní MCP klienti ====

Autor uvádí konfiguraci pro klienta s podporou MCP Apps. Cestu je potřeba nahradit skutečným umístěním sestaveného serveru:

<code json>
{
  "mcpServers": {
    "sketchy": {
      "command": "node",
      "args": ["/path/to/sketchy/dist/index.js"],
      "env": { "SKETCHY_EDITOR": "cursor" }
    }
  }
}
</code>

Samotné připojení serveru ještě neověřuje, že klient umí jeho interaktivní výstup zobrazit. Instalace ani zobrazení v konkrétním prostředí Alpine Linux / ARM64 zde nebyly prakticky ověřeny.

===== Nastavení =====

^ Proměnná ^ Výchozí hodnota ^ Účel ^
| ''SKETCHY_EDITOR'' | ''vscode'' | Editor pro odkazy na soubory; dokumentace uvádí také Cursor, Windsurf, VS Code Insiders a Zed. |
| ''SKETCHY_PHOTOS'' | ''on'' | Hodnota ''off'' vypne vyhledávání a popisování fotografií. |
| ''SKETCHY_DATA_DIR'' | ''~/.sketchy'' | Adresář modelů, uložených fotografií a lokální databáze. |
| ''SKETCHY_EXPORT_DIR'' | ''~/Downloads'' | Výchozí adresář pro exporty. |
| ''SKETCHY_FORMAT'' | ''compact'' | Hodnota ''json'' obnoví JSON podobu nástrojů. |

Přesný způsob nastavení proměnných závisí na použitém MCP klientovi. Lokální zpracování fotografie modelem samo o sobě neznamená, že celý workflow asistenta nebo vyhledání fotografie probíhá bez síťové komunikace.

===== Zdroje =====

  * [[https://github.com/ddkbs/sketchy|Sketchy – repozitář a dokumentace]]
  * [[https://github.com/ddkbs/sketchy/blob/main/skill/SKILL.md|Sketchy – instrukce skillu]]
  * [[https://github.com/ddkbs/sketchy/blob/main/src/photos/models.ts|Sketchy – definice obrazových modelů]]
  * [[https://github.com/ddkbs/sketchy/releases/latest|Sketchy – poslední vydání]]
  * [[https://github.com/wokwi/wokwi-elements|Wokwi Elements – knihovna elektronických součástek]]
  * [[https://huggingface.co/microsoft/Florence-2-base-ft|Florence-2 – obrazový model]]
  * [[https://github.com/modelcontextprotocol/ext-apps|MCP Apps – interaktivní aplikace pro MCP]]
  * [[https://www.jsdelivr.com/|jsDelivr – distribuce vykreslovacího balíčku]]