mermaidjs-v11
Create diagrams and visualizations using Mermaid.js v11 syntax. Use when generating flowcharts, sequence diagrams, class diagrams, state diagrams, ER diagrams, Gantt charts, user journeys, timelines, architecture diagrams, or any of 24+ diagram types. Supports JavaScript API
Installation
Pick a client and clone the repository into its skills directory.
Installation
About this skill
Create diagrams and visualizations using Mermaid.js v11 syntax. Use when generating flowcharts, sequence diagrams, class diagrams, state diagrams, ER diagrams, Gantt charts, user journeys, timelines, architecture diagrams, or any of 24+ diagram types. Supports JavaScript API integration, CLI rendering to SVG/PNG/PDF, theming, configuration, and accessibility features. Essential for documentation, technical diagrams, project planning, system architecture, and visual communication.
How to use
- Zainstaluj Mermaid CLI globalnie na swoim komputerze poleceniem npm install -g @mermaid-js/mermaid-cli — to umożliwi konwersję diagramów do obrazów z linii poleceń.
- Utwórz plik tekstowy z rozszerzeniem .mmd zawierający diagram w składni Mermaid — na przykład flowchart TD z węzłami A, B, C i połączeniami między nimi, lub sequenceDiagram do pokazania interakcji między aktorami.
- Konwertuj diagram do obrazu poleceniem mmdc -i nazwa_pliku.mmd -o nazwa_pliku.svg — domyślnie tworzy SVG, ale możesz zmienić format na PNG lub PDF zmieniając rozszerzenie wyjściowe.
- Aby dostosować wygląd, dodaj motyw w konfiguracji frontmatter na początku pliku (---
theme: dark
---) lub użyj flagi -t dark w poleceniu CLI, a także -b transparent dla przezroczystego tła. - Jeśli chcesz bardziej zaawansowane stylowanie, przygotuj plik CSS i przekaż go poleceniem mmdc -i diagram.mmd --cssFile style.css -o output.svg.
- Osadzaj gotowe diagramy w dokumentacji markdown, stronach HTML lub systemach wiki — Mermaid renderuje je automatycznie w przeglądarkach obsługujących JavaScript.