Gantt- und Tortendiagramme

Beispiel Gantt-Diagramm

Auch einfache Gantt-Diagramme zur Projektplanung sind mit wenigen übersichtlichen Zeilen erstellt. Aufgaben können in Bereiche ("sections") unterteilt werden. Jede Aufgabe wird nach dem Grundschema "Name: ID, Beginn, Ende" in einer Zeile angelegt.

Stellenmarkt
  1. (Senior) Software Developer (m/w/d)
    STABILO International GmbH, Heroldsberg
  2. Business Intelligence (BI) / Data Analytics Specialist (m/w/d)
    Börse Stuttgart GmbH, Stuttgart
Detailsuche

Für Beginn und Ende können absolute Start- und Endzeitpunkte oder relative Zeiträume genutzt werden. Auch Abhängigkeiten zwischen Aufgaben lassen sich mit dem Schlüsselwort "after" gefolgt von den IDs der Vorgänger kompakt in einer Zeile erzeugen. Die abhängigen Aufgaben erscheinen dann im Zeitstrahl automatisch immer erst nach all ihren Vorgängern, auch wenn diese verlängert oder verschoben werden.

Folgender Code erzeugt ein rudimentäres Gantt-Diagramm:

  1. <div class="mermaid">
  2. gantt
  3. title Projekt Neue Website
  4. dateFormat YYYY-MM-DD
  5. section UI UX
  6. Farbschema: u1, 2022-02-01, 1d
  7. Menü: u2, 2022-02-02, 2d
  8. Responsivität: u3, 2022-02-04, 3d
  9. section Backend
  10. Datenbanken: b1, 2022-02-01, 3d
  11. section Sicherheit
  12. Zertifikate: s1, 2022-02-01, 2d
  13. Formularvalidierung: s2, 2022-02-02, 3d
  14. section Inhalt
  15. Über uns: i1, 2022-02-05, 1d
  16. Impressum: i2, 2022-02-07, 1d
  17. Erste Artikel: i3, 2022-02-08, 3d
  18. section Testing
  19. Backend testen: t1, after b1, 3d
  20. Frontend testen: t2, after u1 u2 u3, 3d
  21. </div>

Golem Akademie
  1. Blender Grundkurs: virtueller Drei-Tage-Workshop
    07.-09.06.2022, Virtuell
  2. Linux-Shellprogrammierung: virtueller Vier-Tage-Workshop
    04.-07.07.2022, Virtuell
Weitere IT-Trainings

Die Namen der sections und der Aufgaben sowie die IDs können frei gewählt werden.

Beispiel Tortendiagramme

Am einfachsten sind Tortendiagramme. Ein Tortendiagramm in Mermaid zu erstellen ist so simpel, wie zwei Spalten in Excel zu markieren und auf die Diagramm-Schaltfläche zu klicken:

  1. <div class="mermaid">
  2. pie
  3. title Beliebteste Antworten bei Umfragen
  4. "Ja": 10
  5. "Nein": 15
  6. "Weiß nicht": 20
  7. "keine Zeit": 55
  8. </div>

  • Ausgabe des Codes zum Flussdiagramm (Screenshot: Claus Godbersen)
  • Ausgabe des Codes zum Tortendiagram (Screenshot: Claus Godbersen)
Ausgabe des Codes zum Tortendiagram (Screenshot: Claus Godbersen)

Diese und die anderen verfügbaren Diagrammtypen bieten noch eine ganze Reihe weiterer Elemente und Konfigurationsmöglichkeiten, die in der Dokumentation auf Github gut erklärt werden.

Natürlich gilt: Je größer das Diagramm, desto größer auch der Code. Wer Farbschema und andere Aspekte der Diagramme anpassen will, muss sich außerdem mit den Theme Variables im JSON-Format vertraut machen und noch ein paar zusätzliche Zeilen einfügen.

Probleme mit Pfeilen und Farben

Bei der Anwendung von Mermaid gibt es noch einige wenige Probleme. So ist die Standarddarstellung mancher Diagramme nicht immer makellos. Die Pfeile in Flussdiagrammen nehmen teils etwas unbeholfen anmutende Wege. Das fiele bei manueller Erstellung sicher schöner aus.

In Gantt-Diagrammen folgt die unterschiedliche Färbung der Zeilen, die grundsätzlich der Lesbarkeit dient, mitunter keiner erkennbaren Systematik. Dies sind eher ästhetische Probleme, die sich je nach Anwendungsfall als Nebensächlichkeit, aber auch als Ausschlusskriterium herausstellen können.

JavaScript: Das umfassende Handbuch. JavaScript lernen und verstehen. Inkl. objektorientierter und funktionaler Programmierung

Fazit

Für alle, die Diagramme bisher mit Hilfsmitteln wie MS Office beziehungsweise guter Spezialsoftware wie MS Visio oder draw.io grafisch erstellen oder CSV-Dateien zur automatischen Erstellung nutzen, könnte Mermaid eine echte Offenbarung sein. Statt Formen per Drag and Drop umständlich zusammenzustellen oder in gedrungenen CSV-Dateien nur mit Mühe den richtigen Eintrag zu finden, macht es geradezu Spaß, mit ein paar Zeilen des gut nachvollziehbaren Mermaid-Codes Schaubilder auf den Bildschirm zu zaubern.

Das Problem, dass sehr große Diagramme irgendwann schwer zu lesen und noch schwerer zu pflegen werden, löst Mermaid zwar nicht. Aber gerade kleine Diagramme zum Zweck der Textergänzung lassen sich mit diesem Tool extrem einfach gestalten.

Aufgrund der genannten Probleme sollten Anwender gut prüfen, ob Mermaid für die eigene Produktivnutzung geeignet ist. Zweifellos erhöht sich der Aufwand, wenn Diagramme zum Beispiel in Unternehmen einer Gestaltungsrichtlinie exakt folgen müssen. In solchen Fällen ist es fraglich, ob Mermaid sich lohnt.

Trotzdem gilt: Unbedingt ausprobieren - zumal Mermaid weiterhin aktiv gepflegt und verbessert wird. Die letzte Version ist am 16. Januar 2022 erschienen.

Bitte aktivieren Sie Javascript.
Oder nutzen Sie das Golem-pur-Angebot
und lesen Golem.de
  • ohne Werbung
  • mit ausgeschaltetem Javascript
  • mit RSS-Volltext-Feed
 Javascript: Schnell Diagramme erstellen mit Mermaid
  1.  
  2. 1
  3. 2


yumiko 13. Apr 2022 / Themenstart

Optisch kann man ja anpassen. Der Vorteil ist doch, dass man es in Wikis und Foren...

NativesAlter 10. Apr 2022 / Themenstart

mermaid nur mal anschauen (oder damit herumspielen) geht auch mit Joplin. Joplin ist eine...

shoggothe 10. Apr 2022 / Themenstart

PlantUML ist ähnlich, erzeugt Diagramme aus textueller Beschreibung. Allerdings wird bei...

Zeiram 10. Apr 2022 / Themenstart

Wird hier auch genutzt für unsere Dokumentationen innerhalb des DevOps Wiki (eingebettet...

Kommentieren



Aktuell auf der Startseite von Golem.de
Cariad
Aufsichtsrat greift bei VWs Softwareentwicklung durch

Die Sorge um die Volkswagen-Softwarefirma Cariad hat den Aufsichtsrat veranlasst, ein überarbeitetes Konzept für die ehrgeizigen Pläne vorzulegen.

Cariad: Aufsichtsrat greift bei VWs Softwareentwicklung durch
Artikel
  1. Delfast Top 3.0: Ukrainische Armee setzt E-Motorräder zur Panzerjagd ein
    Delfast Top 3.0
    Ukrainische Armee setzt E-Motorräder zur Panzerjagd ein

    Ukrainische Infanteristen nutzen E-Motorräder, um leise und schnell zum Einsatz zu gelangen und die Panzerabwehrlenkwaffe NLAW zu transportieren.

  2. Überwachung: Polizei setzt Handy-Erkennungskamera gegen Autofahrer ein
    Überwachung
    Polizei setzt Handy-Erkennungskamera gegen Autofahrer ein

    In Rheinland-Pfalz werden Handynutzer am Steuer eines Autos automatisch erkannt. Dazu wird das System Monocam aus den Niederlanden genutzt.

  3. Love, Death + Robots 3: Mal spannend, mal tragisch, mal gelungen, mal nicht so
    Love, Death + Robots 3
    Mal spannend, mal tragisch, mal gelungen, mal nicht so

    Die abwechslungsreichste Science-Fiction-Serie unserer Zeit ist wieder da - mit acht neuen Folgen der von David Fincher produzierten Anthologie-Reihe.
    Von Peter Osteried

Du willst dich mit Golem.de beruflich verändern oder weiterbilden?
Zum Stellenmarkt
Zur Akademie
Zum Coaching
  • Schnäppchen, Rabatte und Top-Angebote
    Die besten Deals des Tages
    Daily Deals • Borderlands 3 gratis • CW: Top-Rabatte auf PC-Komponenten • Inno3D RTX 3070 günstig wie nie: 614€ • Ryzen 9 5900X 398€ • Top-Laptops zu Tiefpreisen • Edifier Lautsprecher 129€ • Kingston SSD 2TB günstig wie nie: 129,90€ • Samsung Soundbar + Subwoofer günstig wie nie: 228,52€ [Werbung]
    •  /