M
mermaidjs-v11
Twórz diagramy i schematy z tekstu — flowcharty, wykresy Gantta, diagramy sekwencji i 24+ typów
Instalacja
Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.
Instalacja
O skillu
Mermaid.js v11 to umiejętność do generowania profesjonalnych diagramów bezpośrednio z kodu tekstowego. Obsługuje ponad 24 typy wizualizacji: flowcharty, diagramy sekwencji, diagramy klas, maszyny stanów, diagramy ER, wykresy Gantta, mapy podróży użytkownika i wiele innych. Możesz renderować diagramy jako SVG, PNG lub PDF za pomocą wiersza poleceń, osadzać je w markdown lub stronach HTML, oraz dostosowywać wygląd poprzez motywy i konfigurację. Idealne do dokumentacji technicznej, planowania projektów, architektury systemów i komunikacji wizualnej.
Jak używać
- 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.