Was leistet Markdy für animierte Diagramme?

Markdy: animierte Systemdiagramme aus Text statt aus dem Grafikeditor

Michael Dobler

Autor Dr. Web

22. August 2026

2 Min. Lesezeit

Markdy dreht das Architekturdiagramm vom statischen Bild zum animierten Text-Artefakt: Das quelloffene Werkzeug beschreibt Systemgrafiken in wenigen Zeilen und lässt sie über die Web Animations API im Browser ablaufen.^[1] Der Ansatz überträgt Mermaids Prinzip der Diagramme als Code erstmals konsequent auf Bewegung.

drweb.de als bevorzugte Quelle auf Google hinzufügenQualitätsgeprüfte Inhalte direkt in Google News & DiscoverJetzt hinzufügen

Das Wichtigste in Kürze

Markdy ist ein quelloffenes Werkzeug unter MIT-Lizenz, das animierte Architektur- und Ablaufdiagramme aus einer Textsprache namens MarkdyScript erzeugt.
Die Grafiken laufen über die Web Animations API und CSS statt über WebGL oder Canvas und bleiben dadurch leicht und einbettbar.
Transpiler übernehmen bestehende Definitionen aus Mermaid, draw.io, Docker Compose, Kubernetes und Terraform.
Für Teams zählt vor allem der Git-Vorteil: Diagramme lassen sich im Pull Request prüfen und versionieren wie Quellcode.

Was macht Markdy anders als Mermaid?

Hand hält ein offenes Daumenkino mit Häuserzeichnungen und „MarkdyScript“-Schriftzug — Markdy visualisiert Software-Architektur mit Zeitachse: Teams deklarieren in MarkdyScript Knoten, Verbindungen und Beats, das Tool berechnet Layout, Kantenführung und Animation automatisch

Mermaid rendert Software-Architektur als statisches Diagramm. Markdy verfolgt denselben Grundgedanken und ergänzt ihn um eine Zeitachse: In der Sprache MarkdyScript deklarieren Teams Knoten, Verbindungen und getaktete Beats, während das Werkzeug Layout, Kantenführung und Animation selbst berechnet.^[1]

Der getippte Text bleibt die einzige Quelle der Wahrheit, ähnlich dem Gedanken hinter einem Markdown-File als verbindliche Design-Vorgabe. Reviewbar wird das Diagramm dadurch wie jeder andere Commit: Eine Änderung an der Grafik ist eine Änderung an einer Textzeile, sichtbar im Pull Request.

Wie funktioniert MarkdyScript im Alltag?

Markdy rendert bewusst über die Web Animations API und CSS-Transformationen, nicht über WebGL oder Canvas.^[2] Die Grafik bleibt Teil des DOM, wiegt im Kern rund 14 Kilobyte und lässt sich in eine Dokumentationsseite einbetten, ohne dass eine GPU-Schicht mitläuft. Die eigentliche Bewegung steuern Übergangskurven, wie sie auch die moderne CSS-Easing-Funktion im Frontend liefert.

Bestehende Formate lassen sich weiterverwenden: Transpiler überführen Definitionen aus Mermaid, draw.io, Docker Compose, Kubernetes und Terraform in animierte Szenen.^[2] Für die tägliche Arbeit liefert das Projekt eine Kommandozeile samt Sprachunterstützung für Editoren wie VS Code. Ein MCP-Server öffnet die Sprache zusätzlich für KI-Agenten.

Markdy im Vergleich: Diagramme als Code, jetzt mit Bewegung

Wo das quelloffene Werkzeug zwischen statischem Diagramm und ausprogrammierter Animation steht.

Markdy

EingabeTextsprache MarkdyScript

RenderingWeb Animations API + CSS

Bewegungja, animiert

LizenzMIT, quelloffen

Mermaid

EingabeTextsprache

RenderingSVG

Bewegungnein, statisch

LizenzMIT, quelloffen

Motion Canvas

EingabeTypeScript-Code

RenderingCanvas und WebGL

Bewegungja, ausprogrammiert

LizenzMIT, quelloffen

Markdy in Zahlen

Layout-Engines von Architektur bis Zeitstrahl

fertige Darstellungs-Themes

~14 KB

Größe des Kern-Pakets @markdy/core

Import-Formate: Mermaid, draw.io, Docker Compose, Kubernetes, Terraform

Diagramme als Code haben die Dokumentation schon einmal aus dem Grafikprogramm befreit. Markdy zieht die Konsequenz und macht auch die Bewegung versionierbar, statt sie in einer Videodatei einzufrieren.
— Markus Seyfferth, Chefredakteur Dr. Web

Für wen lohnt sich der Blick auf Markdy?

Der praktische Gewinn zielt auf Entwicklungs- und Architektur-Teams, die ihre Dokumentation ohnehin im Repository pflegen. Eine animierte Grafik, die einen Request durch mehrere Dienste wandern lässt, erklärt einen Ablauf oft schneller als ein statisches Kastendiagramm. Der DOM-Ausgang bleibt dabei zugänglicher als eine in Canvas gemalte Szene.

Einordnen lässt sich das Werkzeug zwischen zwei Lagern: Mermaid und draw.io stehen für statische Diagramme als Code, Werkzeuge wie Motion Canvas und Remotion für animierte Grafik, die Entwickler in TypeScript ausprogrammieren.^[2] Markdy besetzt die Lücke dazwischen und verbindet eine kurze, deklarative Textsprache mit fertiger Bewegung im Browser, wie sie sonst nur einzelne Bausteine wie animierte SVG-Icons zeigen.

Zur Einordnung gehört die Reife: Markdy steht unter der freien MIT-Lizenz und liegt auf npm bereit, zählt auf GitHub aber erst rund 85 Sterne und damit eine kleine, junge Nutzerbasis.^[2] Für den Produktivbetrieb lohnt der prüfende Blick, ergänzend zum bewährten Werkzeugkasten für Webdesigner. Für rein statische Diagramme bleibt Mermaid vorerst die naheliegende Wahl.