Toolverse
All skills

mermaid-diagrams

by davila7

Comprehensive guide for creating software diagrams using Mermaid syntax. Use when users need to create, visualize, or document software through diagrams including class diagrams (domain modeling, object-oriented design), sequence diagrams (application flows, API interactions,

Installation

Pick a client and clone the repository into its skills directory.

Installation

Quick info

Author
davila7
Category
Frontend
Views
21

About this skill

Comprehensive guide for creating software diagrams using Mermaid syntax. Use when users need to create, visualize, or document software through diagrams including class diagrams (domain modeling, object-oriented design), sequence diagrams (application flows, API interactions, code execution), flowcharts (processes, algorithms, user journeys), entity relationship diagrams (database schemas), C4 architecture diagrams (system context, containers, components), state diagrams, git graphs, pie charts, gantt charts, or any other diagram type. Triggers include requests to \

How to use

  1. Zainstaluj skill mermaid-diagrams w swoim środowisku Claude lub agenta kodowego, dodając go do konfiguracji umiejętności.

  2. Poproś Claude o diagram, używając słów kluczowych takich jak "narysuj diagram", "wizualizuj", "modeluj", "pokaż przepływ" lub opisz, co chcesz dokumentować — architekturę systemu, schemat bazy danych, strukturę kodu lub przepływ użytkownika.

  3. Określ typ diagramu: dla struktury klas użyj diagramu klas, dla interakcji między komponentami — diagram sekwencji, dla procesów i algorytmów — flowchart, dla baz danych — diagram ER, dla systemów — architekturę C4.

  4. Claude wygeneruje kod Mermaid z deklaracją typu na pierwszej linii (np. classDiagram, sequenceDiagram, flowchart) i zawartością definicji poniżej. Możesz dodawać komentarze za pomocą %%.

  5. Skopiuj wygenerowany kod Mermaid do pliku tekstowego lub edytora obsługującego Mermaid — diagram renderuje się automatycznie z tekstu.

  6. Aktualizuj diagram bezpośrednio w tekście — zmień definicje, dodaj nowe elementy lub usuń zbędne części. Brak wymaganych parametrów nie zepsuje diagramu, ale nieznane słowa mogą go uszkodzić, dlatego sprawdzaj składnię.

Related skills