flowchart-creator
Create HTML flowcharts and process diagrams with decision trees, color-coded stages, arrows, and swimlanes. Use when users request flowcharts, process diagrams, workflow visualizations, or decision trees.
Installation
Pick a client and clone the repository into its skills directory.
Installation
About this skill
Create HTML flowcharts and process diagrams with decision trees, color-coded stages, arrows, and swimlanes. Use when users request flowcharts, process diagrams, workflow visualizations, or decision trees.
How to use
Zainstaluj skill flowchart-creator w swoim środowisku Claude lub Copilot, wskazując repozytorium mhattingpete na GitHubie.
Poproś asystenta o utworzenie schematu blokowego, używając jednej z sugerowanych fraz: "Utwórz schemat blokowy dla [proces]", "Wygeneruj diagram przepływu procesu", "Zrób drzewo decyzyjne dla [przepływu pracy]" lub "Pokaż wizualizację przepływu pracy".
Skill automatycznie wygeneruje kod HTML zawierający strukturę SVG z węzłami i połączeniami. Węzły będą skolorowane zgodnie z typem: zaokrąglone prostokąty dla startu (zielony) i końca (czerwony), prostokąty dla procesów (niebieski), romby dla decyzji (pomarańczowy).
Otrzymany kod HTML możesz otworzyć bezpośrednio w przeglądarce. Diagram będzie responsywny dzięki atrybutowi viewBox w elemencie SVG.
Jeśli potrzebujesz swimlan do grupowania sekcji lub bardziej złożonej struktury, wskaż to w prośbie — skill dostosuje szablon HTML do Twoich wymagań.
Możesz edytować wygenerowany kod HTML, aby zmienić etykiety, pozycje węzłów, kolory lub dodać nowe elementy zgodnie z własnymi potrzebami.