Darmowy konwerter online MERMAID do SVG

Czym jest format MERMAID

W kontekście map myśli i schematów blokowych plik MERMAID jest plikiem źródłowym w postaci zwykłego tekstu, zawierającym składnię Mermaid, zwykle zapisywanym z rozszerzeniem .mmd lub .mermaid. Źródło opisuje schematy blokowe, diagramy sekwencji, diagramy klas, diagramy stanów, diagramy encja-relacja oraz mapy myśli, zamiast przechowywać gotowy obraz.

Pliki Mermaid są tworzone lub edytowane w Mermaid Live Editor, Visual Studio Code z rozszerzeniem Mermaid, Obsidianie oraz systemach dokumentacji obsługujących bloki Mermaid. Otwarcie pliku w edytorze tekstu pokazuje deklaracje takie jak flowchart TD lub mindmap; deklaracje te muszą zostać wyrenderowane przez silnik zgodny z Mermaid.

Czym jest format SVG

SVG, czyli Scalable Vector Graphics, to oparty na XML format obrazu, który przechowuje ścieżki, kształty i tekst. Przeglądarki, narzędzia do tworzenia dokumentacji, edytory grafiki wektorowej oraz wiele aplikacji do publikowania mogą wyświetlać go bez środowiska uruchomieniowego Mermaid.

Plik SVG pozostaje ostry po powiększeniu, zazwyczaj skaluje się lepiej niż zrzut ekranu w formacie rastrowym i można go stylizować lub edytować w aplikacjach takich jak Inkscape. Wyeksportowany plik jest wyrenderowanym diagramem, a nie oryginalnym źródłem Mermaid, dlatego późniejsza zmiana struktury diagramu jest łatwiejsza na podstawie pliku .mmd.

Jak przekonwertować MERMAID na SVG

Korzystanie z Mermaid CLI

Mermaid CLI to najbardziej bezpośrednia metoda wykorzystująca komputer lub wiersz poleceń; wymaga Node.js. Zainstaluj renderer za pomocą:

npm install -g @mermaid-js/mermaid-cli

Zapisz źródło jako diagram.mmd, a następnie wyrenderuj je za pomocą:

mmdc -i diagram.mmd -o diagram.svg

Opcja -i określa źródło Mermaid, a -o określa wyjściowy plik SVG. W przypadku diagramu korzystającego z niestandardowego motywu lub pliku konfiguracyjnego przekaż go za pomocą:

mmdc -i diagram.mmd -o diagram.svg -c mermaid-config.json

Możesz także renderować bezpośrednio za pomocą npx, bez instalacji globalnej:

npx -p @mermaid-js/mermaid-cli mmdc -i diagram.mmd -o diagram.svg

Korzystanie z Mermaid Live Editor

Otwórz źródło w Mermaid Live Editor, sprawdź wyrenderowany podgląd pod kątem błędów składni, a następnie użyj opcji Actions → Export Diagram → SVG lub równoważnego elementu sterującego eksportem SVG. Zapisz pobrany plik z rozszerzeniem .svg. Ta metoda jest odpowiednia, gdy nie można zainstalować Node.js, ale zależy od obsługiwanej przez edytor wersji Mermaid oraz dostępnych funkcji diagramów.

Korzystanie z wbudowanego konwertera online

Możesz bezpłatnie przekonwertować plik w serwisie 101convert.com bez instalowania oprogramowania: prześlij plik .mmd lub .mermaid, wybierz SVG jako format wyjściowy, rozpocznij konwersję i pobierz wynikowy plik .svg.

Uwagi dotyczące jakości i zgodności

Błędy konwersji zwykle wynikają z nieobsługiwanej składni Mermaid, brakujących zależności diagramu lub nieprawidłowego wcięcia w konstrukcjach takich jak mapy myśli. Wyrenderuj źródło przed eksportem i sprawdź plik SVG w docelowym rozmiarze wyświetlania.

Wygląd pliku SVG może zależeć od dostępnych czcionek, renderowania przez przeglądarkę, wersji Mermaid oraz ustawień motywu. Jeśli istotny jest dokładny wygląd, użyj popularnej czcionki lub po eksporcie zamień tekst na ścieżki w edytorze grafiki wektorowej; zamiana tekstu na ścieżki utrudnia późniejszą edycję tekstu.

Niektóre programy wyświetlające SVG ograniczają obsługę osadzonych stylów, skryptów, hiperłączy lub obiektów foreign XML. Aby zapewnić maksymalną zgodność, użyj prostego statycznego pliku SVG i usuń funkcje interaktywne zależne od JavaScript. Zachowaj oryginalny plik Mermaid razem z plikiem SVG, aby diagram pozostał edytowalny pod względem struktury.