Poradniki po polsku

Podgląd diagramów Mermaid w VS Code

VS Code nie ma własnego podglądu Mermaid. Zainstaluj darmowe rozszerzenie Mermaid Viewer, otwórz plik .mmd albo .mermaid i kliknij ikonę podglądu w prawym górnym rogu edytora, a diagram będzie się zmieniał razem z tekstem, który piszesz. Dla pliku Markdown podgląd pokazuje wszystkie bloki mermaid. Mermaid 12.3.0 jest wbudowany w rozszerzenie, więc podgląd i eksport do PNG lub SVG są za darmo i działają offline, bez logowania. Zovo Pro (19 USD jednorazowo) dodaje eksport do PDF, eksport wszystkich diagramów w obszarze roboczym i eksport przy zapisie, a każde z tych narzędzi możesz uruchomić 3 razy za darmo.

Za darmo, licencja MIT. ID rozszerzenia zovo.mermaid-viewer, wersja 0.3.3.

Ten poradnik przeczytasz też w wersji English, Deutsch, Español, Français, Italiano, 日本語, Português (Brasil), 简体中文.

Kroki w VS Code

1. Zainstaluj Mermaid Viewer z Marketplace albo naciśnij Ctrl+P (Cmd+P w macOS) i uruchom ext install zovo.mermaid-viewer.
2. Otwórz plik .mmd albo .mermaid i kliknij ikonę podglądu na pasku tytułu edytora albo naciśnij Ctrl+K V (Cmd+K V w macOS). Możesz też uruchomić z Command Palette polecenie „Mermaid Viewer: Open Diagram Editor (Text + Live Preview)”.
3. Dla pliku Markdown z blokami ```mermaid kliknij tę samą ikonę podglądu. Podgląd pokazuje wszystkie diagramy, każdy z własną linią błędu i własnymi przyciskami eksportu.
4. Kliknij „Edit diagram” nad blokiem w pliku Markdown, żeby edytować go obok podglądu na żywo. Po zapisaniu tekst wraca do swojego bloku.
5. Przewijaj, żeby przybliżać w miejscu wskaźnika, i przeciągaj, żeby przesuwać widok. Fit i 100% są na pasku narzędzi.
6. Kliknij Export i wybierz Save PNG (1x, 2x albo 4x lub dokładna szerokość albo wysokość), Save SVG, Copy PNG albo Copy SVG code.

Co jest za darmo, a co dodaje Zovo Pro

Za darmo są podgląd na żywo, edytor diagramów, Edit diagram dla bloków w Markdown, podpowiedzi, podkreślanie błędów, 15 szablonów, widok Mermaid Diagrams oraz eksport i kopiowanie PNG i SVG. Nie ma konta, logowania ani AI.

Export All Diagrams in Workspace zapisuje każdy diagram z każdego pliku .mmd, .mermaid i Markdown w folderze jako SVG, PNG albo w obu formatach, do folderu mermaid-export/ z takim samym układem folderów jak pliki źródłowe. Diagramy, których nie da się narysować, są wymienione na końcu. Gdy dokumentacja się zmienia, nie musisz ręcznie otwierać i eksportować każdego diagramu.

Narzędzie Export All Diagrams in Workspace (Zovo Pro)

7. Otwórz folder w VS Code. Uruchom z Command Palette polecenie „Mermaid Viewer: Export All Diagrams in Workspace (SVG/PNG) (Pro)” albo kliknij „Export All Diagrams in Workspace” w wierszu „Pro tools” pod paskiem narzędzi podglądu.
8. Wybierz SVG, PNG albo SVG i PNG.
9. Zostaw domyślny folder mermaid-export (ustawienie mermaidViewer.exportFolder) albo wybierz „Choose a folder…”. Próba liczy się dopiero wtedy, gdy pliki zostaną zapisane. Escape jej nie zużywa.

Export All Diagrams in Workspace działa 3 razy na twoim komputerze, zanim poprosi o licencję. Przy otwieraniu pliku nie ma wyskakujących okienek ani odliczania.

Zovo Pro kosztuje 19 USD jednorazowo. To nie jest subskrypcja. Licencja włącza narzędzia Pro we wszystkich rozszerzeniach Zovo, nie tylko w Mermaid Viewer. Po płatności kartą (Stripe) klucz licencyjny pojawi się na następnej stronie. W VS Code uruchom z Command Palette polecenie „Zovo Pro: Enter Zovo Pro license key” i wklej klucz. Klucz jest sprawdzany na twoim komputerze, bez połączenia z siecią. Przez GitHub Sponsors wybierz poziom "$19 one time", a potem uruchom „Zovo Pro: I already paid: unlock with GitHub Sponsors”.

Zespół 5 osób płaci 59 USD jednorazowo (kartą). Wszystkie zasady i narzędzia Pro opisuje strona Zovo Pro (po angielsku).

Kroki w Cursor, Windsurf lub VSCodium

1. Otwórz widok Extensions skrótem Ctrl+Shift+X (Cmd+Shift+X w macOS).
2. Wyszukaj zovo.mermaid-viewer i kliknij Install. Cursor, Windsurf i VSCodium instalują rozszerzenia z Open VSX, gdzie to rozszerzenie ma nazwę zovo/mermaid-viewer.
3. Jeśli edytor nie ma galerii rozszerzeń, pobierz plik .vsix ze strony Open VSX i uruchom „Extensions: Install from VSIX...”.
4. Dalej wszystko działa tak samo jak w VS Code.

Co otwiera Mermaid Viewer

• Flowchart, sequence, class, state, ER, Gantt, pie, gitGraph, mindmap, timeline, sankey, XY chart, block, C4, architecture i inne typy, które zna Mermaid 12.3.0.
• Błędy podkreślone w swojej linii i wymienione w panelu Problems. Ostatni poprawny diagram zostaje na ekranie, a jeden uszkodzony blok w pliku Markdown nie ukrywa pozostałych.
• Powiększenie od 1% do 3200% w miejscu wskaźnika, z przesuwaniem i powiększaniem gestami na gładziku.
• Eksport SVG ze zwykłymi etykietami tekstowymi dla wiki w Azure DevOps i GitHub.
• Tło w kolorze edytora, białe, przezroczyste albo w wybranym kolorze, używane także przy eksporcie.

Czego nie robi

• Nie dodaje diagramów do wbudowanego podglądu Markdown w VS Code. Otwiera własny panel podglądu.
• Wzory matematyczne w etykietach ($$...$$) mogą wyglądać źle, bo czcionki KaTeX nie są dołączone.
• Paczki ikon, które Mermaid pobiera z internetu, nie są wczytywane. Wbudowane ikony działają.
• Diagramy dłuższe niż 500 000 znaków albo z ponad 2000 połączeń nie są rysowane, dopóki nie podniesiesz limitu (ustawienia mermaidViewer.maxTextSize i mermaidViewer.maxEdges).
• Rysowanie, które trwa dłużej niż 10 sekund, jest przerywane (ustawienie mermaidViewer.renderTimeoutSeconds).

Pytania

Więcej informacji

Więcej szczegółów i inne możliwości znajdziesz w angielskiej wersji poradnika. Wszystkie funkcje i ustawienia opisuje strona Mermaid Viewer (po angielsku).

Fakty sprawdzone 12 listopada 2026 na wersji dostępnej w Marketplace.