Boehrsi.de - IT und Gaming Blog

Mermaid - Nützliche VS Code Plugins

Erstellt am event Uhr von account_circle Boehrsi in label Development
Mermaid - Nützliche VS Code Plugins Bild

Vor einigen Tagen berichtete ich über meinen Wechsel auf Mermaid, im Kontext der Erstellung von Graphen und Diagrammen. Damit man mit textbasierten Tools dieser Art aber ordentlich arbeiten kann, brauch man natürlich ein bisschen Tooling, ähnlich wie auch schon im Bereich DOT / GraphViz.
Damit die Arbeit hier leichter fällt habe ich mir aus der durchaus großen Auswahl an Visual Studio Code Plugins zwei ausgewählt und nutze diese nun erfolgreich. Das Erste ist dabei Mermaid Markdown Syntax Highlighting, welches wie der Name schon sagt Syntax Highlighting für Mermaid Diagramme bereitstellt. Dies funktioniert einwandfrei, lediglich bestimmte Klammerungen, die für einige besonders geformte Knoten genutzt werden, werden nicht gesondert hervorgehoben. Dies ist aber absolut im Rahmen und stellt meiner Meinung nach kein Problem dar, vor allem da die meisten vermutlich ohnehin auf abgerundete Ecken bei ihren Diagrammen verzichten.
Weiter geht es mit Markdown Preview Mermaid Support. Dieses Plugin integriert Mermaid Diagramme direkt in die vorhandene Markdown Preview von VS Code. Das Ganze funktioniert extrem einfach, man bekommt direkt Informationen falls man etwas falsch macht und auch die Performanz ist sehr gut. Man kann seine Markdown Dateien quasi wie immer bearbeiten, bekommt nun aber auch Diagramme direkt angezeigt.

Sehr schön ist das beide Plugins keine Einrichtung benötigten und ohne weitere Konfiguration einfach genutzt werden können. Für mich ist die Kombination aus diesen beiden Plugins ausreichend für die Bearbeitung von Mermaid Diagrammen, denn ich nutze selbige in meiner Dokumentation, welche wiederum immer in Markdown verfasst wird. Für den Fall das ich trotz dessen mal ein Diagramm als Bild benötige, nutze ich einfach den Mermaid Online Editor open_in_new und exportiere das Bild entsprechend. Dies war bei DOT / GraphViz Dateien zuvor immer mein Flow, also eine textuelle Repräsentation und zusätzlich das Bild als eigene Datei. Das brauche ich bei Mermaid nicht mehr, da mein Tooling, wie z.B. Gitea oder GitLab, die textuelle Form selber in Bilder umwandelt sobald man die Dateien im Web betrachtet.
Auf diesem Weg kann ich nun einfach und fehlerfrei Diagramme erstellen, welche ich direkt sehen kann. Anschließend werfe ich sie ins Git meiner Wahl, ohne jegliche Konvertierungen in andere Dateitypen und schon ist alles erledigt.

Related Links
Kommentare  
Kommentar erstellen
Mit dem Abschicken des Kommentars erklären sie sich mit der in der Datenschutzerklärung dargelegten Datenerhebung für Kommentare einverstanden. Spam, unangebrachte Werbung und andere unerwünschte Inhalte werden entfernt. Das Abonnieren via E-Mail ist nur für E-Mail Adressen erlaubt die Sie rechtmäßig administrieren. Widerrechtliche Abonnements werden entfernt.