HN vorgestellt: GUI zum Bearbeiten von Mermaid-Klassendiagrammen

GUI zum Bearbeiten von Mermaid-Klassendiagrammen

• Vorteile von Mermaid-Charts: Mermaid-Charts, mit denen sich komplexe Diagramme schnell darstellen lassen, sind durch ein aktuelles Update bei der Bearbeitung von Klassendiagrammen noch intuitiver und einfacher geworden. Die neue Funktion erweitert den visuellen Editor um die direkte Interaktion mit Klassendiagrammen und bietet verschiedene Werkzeuge, mit denen Nutzer ihr Diagramm-Erlebnis verbessern können.

Was ist ein Klassendiagramm?

• Definition eines Klassendiagramms: Eine Art von UML (Unified Modeling Language), die die Struktur eines Systems modelliert und Klassen, Attribute, Methoden sowie Beziehungen zwischen Objekten zeigt. Als unverzichtbares Werkzeug im objektorientierten Design hilft es dabei zu visualisieren, wie verschiedene Teile eines Systems miteinander interagieren.
• Grundelemente:
  • Klasse: Stellt ein Objekt oder Konzept dar.
  • Attribute: Merkmale oder Eigenschaften einer Klasse.
  • Methoden: Aufgaben oder Operationen, die eine Klasse ausführen kann.
  • Beziehungen: Stellen Verbindungen oder Interaktionen zwischen Klassen dar.

Neue Werkzeuge im visuellen Editor

• Werkzeugüberblick: Die Toolbar des visuellen Editors führt mehrere neue Werkzeuge für Klassendiagramme ein.
  • Richtung des Diagramm-Renderings ändern: Passt das Layout des Diagramms an.
  • Neue Klasse hinzufügen: Fügt dem Diagramm einfach eine neue Klasse hinzu.
  • Titel und Notizen hinzufügen: Fügt dem Diagramm einen Titel hinzu oder ergänzt Notizen, die keiner bestimmten Klasse zugeordnet sind.
  • Leeren Namespace hinzufügen: Definiert einen Platzhalter für Klassen, die zu einem bestimmten Namespace gehören.
  • Diagrammkonfiguration aktualisieren: Schaltet Optionen wie die Sichtbarkeit von „leeren Mitgliederboxen“ um, um ein aufgeräumtes Erscheinungsbild zu erhalten.
  • Theme und Layout ändern: Wählt verschiedene Themes aus und passt das Erscheinungsbild des Diagramms an.

Neue Klassen und Beziehungen erstellen

• So werden Klassen und Beziehungen erstellt:
  • Neue Klasse über eine bestehende Beziehung erstellen: Nach einem Klick auf eine vorhandene Klasse im Diagramm kann man in einen freien Bereich ziehen, um eine neue Klasse zu erstellen und eine direkte Beziehung zur ursprünglichen Klasse festzulegen.
  • Beziehung zwischen bestehenden Klassen erstellen: Eine Beziehungslinie von einer Klasse zu einer anderen ziehen, um schnell eine Beziehung einzurichten.

Klassendetails bearbeiten

• Klasseneigenschaften ändern: Der visuelle Editor bietet eine leistungsfähige interaktive Oberfläche, mit der sich Klasseneigenschaften ohne Code bearbeiten lassen. Jede Eigenschaft einer Klasse kann detailliert konfiguriert werden.
  • Attribute: Sichtbarkeitsmodifikator definieren, Datentyp festlegen, Attributnamen angeben.
  • Methoden: Methodensichtbarkeit festlegen, Rückgabetyp definieren, Methodennamen und Parameter angeben.

Zusätzliche Tipps zur Diagrammoptimierung

• Mit verschiedenen Layouts experimentieren: Layout- und Theme-Optionen nutzen, um das optimale Erscheinungsbild des Diagramms zu finden.
• Mit Notizen Kontext ergänzen: Die Notizfunktion verwenden, um Teile des Diagramms zu erläutern und komplexe Beziehungen zu verdeutlichen.

Erste Schritte

• Werkzeuge des visuellen Mermaid-Editors nutzen: Die neuen Funktionen erkunden, um Klassendiagramme effizienter und zugänglicher zu machen. Ob ein neues Diagramm von Grund auf erstellt oder ein bestehendes verbessert wird – diese Updates sparen Zeit und Aufwand und ermöglichen es, sich stärker auf Design und Struktur des Systems zu konzentrieren.

[GN⁺]

Meinungen auf Hacker News

• Als Frontend für Mermaid nutze ich normalerweise Claude. Wenn ich komplexe Ideen erklären muss, machen die von Claude schnell erstellten Diagramme die Erklärung deutlich einfacher.
  Ich habe auch einen kostenpflichtigen Mermaid-Account, aber da ich ohnehin Claude am meisten nutze, bleibt Claude für mich der erste Einstiegspunkt. Was ich mir von einer GUI erwarte, ist, solche schnellen Diagramme mit Stil und Farben zu versehen und Boxen etwas zu verschieben, damit die Pfeile besser aussehen als beim automatischen Layout.
  Wenn man den Blog liest, wirkt es so, als könnte die Funktion zum Ändern von Farben und Styling einzelner Boxen fehlen. Gerade das ist beim manuellen Bearbeiten im Code der zeitaufwendigste Teil, daher wäre ein umfangreiches Tool dafür wünschenswert.

  • Interessant, aber ich frage mich, ob es keine Stolpersteine gab. Letzte Woche habe ich Claude gebeten, ein Syntaxdiagramm für eine Spielzeuggrammatik zu erstellen, und wegen nicht escapeter Sonderzeichen enthielt der Mermaid-Quelltext Syntaxfehler.
    Obwohl Claude selbst ein Mermaid-Widget hat, konnte ich es nicht dazu bringen, den eigenen Codefehler zu beheben.

• Ich bin Dominic aus dem Mermaid-Produktteam. Wenn es aktuelle Produktprobleme, Verbesserungswünsche oder Themen gibt, über die ihr sprechen möchtet, schreibt mir bitte an [e-mail] oder bucht einen Termin in meinem Kalender: https://calendly.com/dominic-01w/mermaid-shapers-product-int...

  • Ich frage mich, wann Mermaid-Diagramme außerhalb des Webbrowsers gerendert werden: https://github.com/mermaid-js/mermaid/issues/2485
    Ich habe einen Markdown-Editor namens KeenWrite(https://keenwrite.com/) gebaut und ermöglicht, Diagramme per Triple-Backtick-Syntax einzubetten. Dabei wird das Präfix diagram- geparst, ein Wort wie graphviz an Kroki(https://kroki.io/) übergeben, und Kroki rendert verschiedene ASCII-Diagramme, darunter Mermaid.
    In Markdown werden Quellcodeausschnitte ursprünglich dadurch dargestellt, dass man nach den drei Backticks einen Sprachbezeichner angibt und sie in einer Monospace-Schrift anzeigt. Dass GitHub diese Konvention aufgebrochen hat, indem es einen De-facto-Standard für Mermaid-Diagramme geschaffen hat, war aus meiner Sicht eine bedauerliche Entscheidung.
  • Ich stimme der Frage nach browserlosem Rendering zu. Bisher habe ich erfolglos versucht, ein Selenium-Setup für Headless-Builds anzupassen, und auch Text wurde falsch gerendert.
    Für ein Tool, das breite Akzeptanz erreichen will, sollte browserloses Rendering als grundlegende Funktion über ein PoC hinaus oberste Priorität haben.
  • Es wäre gut, wenn die Layout-Steuerung besser würde, damit Diagrammkomponenten nicht miteinander kollidieren. Das ist sicher keine einfache Anforderung, aber ich stoße ziemlich oft auf falsch platzierte Komponenten, und wenn Mermaid das löst, könnte es ein großer Vorteil sein.

• Ich habe das kürzlich ausprobiert und war anfangs angetan. ChatGPT hat Mermaid-Diagramme ebenfalls recht gut erzeugt, aber die eigene AI-Funktion habe ich nicht ausprobiert.
  Nachdem ich jedoch ein Diagramm mittlerer Komplexität erstellt hatte und das Layout mit der Whiteboard-Funktion per Drag-and-drop verbessern wollte, wurde es sehr wackelig. Es war schwierig, Elemente an die gewünschten Positionen zu bringen oder sie sauber zu ziehen, und Überlappungen ließen sich ebenfalls schwer beheben. Schade war auch, dass einige Diagrammtypen Whiteboard nicht unterstützen.
  Auch die Funktionsunterschiede zwischen mermaidchart.com und mermaid.live sind verwirrend. Ich weiß nicht, ob es Konkurrenzprodukte sind oder Varianten ähnlicher Apps, und die Namen „Playground“ und „Live Editor“ stiften ebenfalls Verwirrung. Trotzdem freue ich mich, dass es das gibt, und hoffe, dass es weiter verbessert wird.

  • Ich bin der CEO von Mermaid. Whiteboard befindet sich noch in einem frühen Stadium und wird sich in den nächsten Monaten deutlich verbessern.
    mermaidchart.com und mermaid.live werden vom selben Team betrieben. Mermaid.live ist der ursprüngliche Editor des zehn Jahre alten Open-Source-Projekts und ein vollständig als Open Source gehosteter Editor.
    Der Schöpfer von Mermaid hat kürzlich zusammen mit dem Venture-Studio des GitLab-CEO mermaidchart.com aufgebaut und erweitert es für mehr Nutzer und Enterprise-Funktionen. Das Unternehmen ist Open Core und hat Venture Capital aufgenommen, aber das Mermaid-Projekt bleibt weiterhin Open Source und wird weiter finanziert.
  • Dass Mermaid nur so layoutet, wie Mermaid es „will“, und nicht so, wie man es selbst möchte, könnte ein grundlegendes Problem von Mermaid sein. Schon seit früher entstehen riesige leere Flächen, und es war schwer, das gewünschte Layout zu erreichen.

• Diagramm-Tools mit automatischen Layout-Algorithmen nutze ich meist nur, wenn ich Visualisierungen fürs Debugging programmatisch erzeuge. Für Dokumentationszwecke zeichne ich lieber von Hand mit OmniGraffle.
  Mit Tools wie graphviz einen Graphen schön aussehen zu lassen, ist sehr komplex, und am Ende missbraucht man Funktionen trickreich, um die gewünschte Form zu bekommen.
  Was wirklich nötig ist, ist meiner Meinung nach ein Machine-Learning-basierter Graph-Layout-Algorithmus, der Lesbarkeit und Ästhetik berücksichtigen kann. Was ich bisher gefunden habe, war stark auf die Darstellung großer Graphen ausgerichtet und gehörte eher in ein anderes Feld.
  Wenn Mermaid alle Bearbeitungspunkte sammelt, die in der UI entstehen, könnte das ein ziemlich guter Datensatz werden.

  • Wir entwickeln und verkaufen eine solche Layout-Engine; man kann sie hier ausprobieren: https://play.d2lang.com/?script=qlDQtVOo5AIEAAD__w%3D%3D&lay...
    Ein größeres Beispiel gibt es hier: https://play.d2lang.com/?script=rJLfavMwDMXv_RR6gYbvo3ce7FWG...
    Ich mag Eigenwerbung in Beiträgen von Wettbewerbern nicht besonders, aber da Mermaid nicht damit konkurriert, eine eigene Layout-Engine zu bauen, finde ich es in diesem Kontext relevant.
  • Ein paar interessante Links, die ich beim Blick in dieses Gebiet gefunden habe: ELK, eine allgemeine Graph-Zeichenbibliothek ähnlich wie Graphviz, aber mit mehr Optionen und Kontrolle: https://eclipse.dev/elk/
    Experimente des Teams der Kiel University, das ELK entwickelt hat: https://github.com/kieler/KLighD
    Wiki des Kieler-Projekts: https://rtsys.informatik.uni-kiel.de/confluence/display/KIEL...
    Eine constraint-basierte Graph-Zeichenbibliothek: https://www.adaptagrams.org/, JS-Implementierung: https://ialab.it.monash.edu/webcola/
    Ebenfalls lesenswert sind das HOLA-Paper https://ialab.it.monash.edu/~dwyer/papers/hola2015.pdf, die Confluent-Graphs-Demo https://www.aviz.fr/~bbach/confluentgraphs/, das Paper zu orthogonalen Layouts https://arxiv.org/pdf/1408.4626.pdf und das Paper zu Power-Graph-Kompression https://arxiv.org/pdf/1311.6996v1.pdf.
  • Ich bin Dominic aus dem Produktteam von Mermaid. Wir haben Whiteboard gestartet, um Nutzern zu helfen, genau das gewünschte Layout zu bekommen, aber es ist noch in einem frühen Stadium und wir verbessern vieles.
    Ich verstehe, dass automatische Layout-Algorithmen einen großen Teil des Reizes von Mermaid ausmachen, weil sie Geschwindigkeit bringen, aber die aktuellen Layouts können sich manchmal ziemlich komplex verknoten.
    Die Idee eines Machine-Learning-Modells ist interessant, und ich frage mich, was die grundlegenden Anforderungen an ein gut lesbares und ansprechend aussehendes Diagramm sind. Zum Beispiel könnten Kriterien sein, ob Kanten rechtwinklig oder abgerundet sein sollten. Wenn du deine Gedanken teilen kannst, schreib mir bitte an [e-mail].
  • Ich arbeite an einem Tool, das eine Syntax zum Schreiben von Diagrammen als Code mit einer Syntax zur Definition von Rendering-Constraints kombiniert. Zum Beispiel: Dieser Teil muss links von jenem Teil stehen, oder dieser Pfeil darf jenen Pfeil nicht kreuzen.
    Ich hoffe, dass sich damit konsistentes Diagramm-Rendering und Feinschliff bis auf die letzte Pixelebene deutlich vereinfachen lassen. Eine sehr frühe Alpha-Version des Renderers, der Cassowary verwendet, funktioniert bereits, und ich arbeite an einer guten GUI.

• Bei „Create your account“ verliere ich sofort das Interesse. Schön wäre, wenn man den Editor ausprobieren und bis zu dem Punkt, an dem man ihn mag, im lokalen Speicher des Browsers speichern könnte, bevor man ein Konto erstellt.

• Mir gefällt, dass Mermaid immer besser wird. Für Sequenzdiagramme halte ich https://sequencediagram.org/ für das Beste. Ich bin nicht beteiligt, nur ein zufriedener Nutzer.

  • Ich habe es früher in einer kollaborativen Diagramm-Session genutzt und mochte, dass es einfach und unkompliziert war. Der Kern von Mermaid ist aber Portabilität. Entscheidend ist, dass man es in Markdown-Dokumente einbetten und in vielen Editoren und Plattformen anzeigen kann.
  • Aus Sicht des Mermaid-Chart-Produktteams finde ich, dass auch Mermaids Sequenzdiagramm-Funktion ziemlich glänzt. Ich frage mich, worin https://sequencediagram.org/ besser ist als Mermaid-Sequenzdiagramme.
  • Ich habe auch andere Editoren ausprobiert, bin am Ende aber immer zu sequencediagram.org zurückgekehrt. Es funktioniert einfach gut und macht wenig Umstände.
  • Ich finde, der Sequenzdiagramm-Editor von MermaidChart ist besser als sequencediagram.org.
  • sequencediagram.org scheint vermutlich PlantUML zu verwenden, daher kann man dasselbe auch lokal ohne Website machen.

• Ich verstehe, dass die Philosophie eine andere ist, aber ich würde mir wünschen, dass der Tag kommt, an dem man Mermaid innerhalb von LaTeX verwenden kann. Zumindest ein Tool, das Mermaid zuverlässig nach TikZ konvertiert, würde die Vorbereitung von Folien wohl deutlich erleichtern.
  Der Export als PNG/JPG ist zwar möglich, aber dabei verliert man meist viele Anpassungsmöglichkeiten und kann im Grunde nur noch die Größe erhöhen oder verringern, um es an die Seite anzupassen.
  Gestern habe ich mir das angesehen und bin dabei auch auf die in diesem Beitrag vorgestellte neue GUI gestoßen; am Ende habe ich dann doch als PNG exportiert und mich damit herumgeschlagen, es ins Beamer-Seitenlayout einzupassen.

• Draw.io kann Mermaid-Diagramme einbetten, und es gibt VSCode sowie diverse IDE-Plugins – ich frage mich, was daran besonders ist.

  • Die Mermaid-Integration von Draw.io und die VSCode-/IDE-Plugins sind gut, unterstützen aber hauptsächlich die programmatische Bearbeitung von Diagrammen.
    Das Alleinstellungsmerkmal von Mermaid Chart ist die bidirektionale Bearbeitung. Man kann den Code ändern, um das Diagramm anzupassen, und wenn man das Diagramm direkt ändert, werden diese Änderungen automatisch in den Code übernommen.
    Derzeit ist diese bidirektionale Bearbeitung für Klassendiagramme und Flowcharts verfügbar; künftig soll sie auf weitere beliebte Diagrammtypen ausgeweitet werden.
  • Wettbewerb ist gut für Innovation, und Auswahl ist gut für alle. Muss es unbedingt besonders sein?

• Das Bild „Theme Customization in Toolbar“ wird nicht gerendert.

• Das Projekt selbst ist cool, aber in philosophischer Hinsicht habe ich Zweifel.
  Mermaid will so etwas wie Markdown für Diagramme sein; das Wichtigste daran ist, dass es als einfacher Text bearbeitet und konsumiert werden kann. Wenn man einen visuellen Editor verwenden muss, frage ich mich, warum man dann nicht gleich ein leistungsfähigeres Tool nimmt und sich von einem eingeschränkten Format löst.
  Das ist ähnlich wie bei WYSIWYG-Markdown-Editoren. Natürlich gibt es dafür wohl eine Nische, aber dann könnte man doch auch einfach Google Docs oder MS Word verwenden.