Mermaid-Diagramme im eigenen Markdown rendern #1

New Issue

2026-08-05T16:53:12+02:00

D4rkst3r commented

2026-08-05 16:53:12 +02:00

Worum es geht
Diagramme (Produktionsketten, Abläufe, Zustandsgraphen) sollen auf den eigenen Seiten erscheinen — nicht nur als Bild, sondern als Text, der mit dem Rest mitläuft und diffbar bleibt.

Gitea 1.26.4 rendert Mermaid bereits, die Spiel-Doku braucht also nichts. Was fehlt, ist der Weg nach draußen: auf den Hub, ins Devlog, auf eine öffentliche Seite. Das kann kein externes Werkzeug übernehmen.

Ausdrücklich nicht Teil davon: ein eigener Editor. mermaid.live ist vom selben Team, MIT-lizenziert, kostenlos und ohne Konto. Ihn nachzubauen bringt nichts außer Wartung. Geschrieben wird dort, gerendert wird hier.

Was zu tun ist
Code-Blöcke im Mini-Markdown. frontend/src/markdown.jsx kennt heute nur inline code — eingezäunte Blöcke (```) gar nicht. Das ist die Voraussetzung für alles Weitere und für sich schon eine Lücke.

Bibliothek per import() nachladen. Mermaid ist als npm-Paket 83 MB entpackt; im Browser landet weniger, es bliebe aber der größte Brocken. Das Frontend ist im Ganzen gerade ~540 kB — das darf nur zahlen, wer eine Seite mit Diagramm öffnet.
Fehlerfall bedenken: kaputte Syntax darf die Seite nicht killen, sondern zeigt den Quelltext als Code-Block.
Beide Themes. Mermaid bringt eigene Farben mit; die müssen an die CSS-Variablen der Seite.
Wo es wirkt
markdown.jsx hängt an neun Stellen: Changelog, DevlogDetail, Devlogs, Events, Home, Roadmap, Seite (freier Seiten-Editor), Settings und dem Composer-Vorschau. Der eigentliche Anwendungsfall ist der Seiten-Editor — dort entsteht der Text, in dem ein Diagramm Sinn ergibt.

Aufwand
Ein Nachmittag. Kein Projekt.

Offen
Lohnt sich das Megabyte? Nur, wenn Diagramme wirklich auf öffentliche Seiten sollen. Reine Eigen-Doku ist mit Gitea schon abgedeckt.

Worum es geht Diagramme (Produktionsketten, Abläufe, Zustandsgraphen) sollen auf den eigenen Seiten erscheinen — nicht nur als Bild, sondern als Text, der mit dem Rest mitläuft und diffbar bleibt. Gitea 1.26.4 rendert Mermaid bereits, die Spiel-Doku braucht also nichts. Was fehlt, ist der Weg nach draußen: auf den Hub, ins Devlog, auf eine öffentliche Seite. Das kann kein externes Werkzeug übernehmen. Ausdrücklich nicht Teil davon: ein eigener Editor. mermaid.live ist vom selben Team, MIT-lizenziert, kostenlos und ohne Konto. Ihn nachzubauen bringt nichts außer Wartung. Geschrieben wird dort, gerendert wird hier. Was zu tun ist Code-Blöcke im Mini-Markdown. frontend/src/markdown.jsx kennt heute nur `inline code` — eingezäunte Blöcke (```) gar nicht. Das ist die Voraussetzung für alles Weitere und für sich schon eine Lücke. ```mermaid abzweigen und an einen eigenen Renderer geben. Bibliothek per import() nachladen. Mermaid ist als npm-Paket 83 MB entpackt; im Browser landet weniger, es bliebe aber der größte Brocken. Das Frontend ist im Ganzen gerade ~540 kB — das darf nur zahlen, wer eine Seite mit Diagramm öffnet. Fehlerfall bedenken: kaputte Syntax darf die Seite nicht killen, sondern zeigt den Quelltext als Code-Block. Beide Themes. Mermaid bringt eigene Farben mit; die müssen an die CSS-Variablen der Seite. Wo es wirkt markdown.jsx hängt an neun Stellen: Changelog, DevlogDetail, Devlogs, Events, Home, Roadmap, Seite (freier Seiten-Editor), Settings und dem Composer-Vorschau. Der eigentliche Anwendungsfall ist der Seiten-Editor — dort entsteht der Text, in dem ein Diagramm Sinn ergibt. Aufwand Ein Nachmittag. Kein Projekt. Offen Lohnt sich das Megabyte? Nur, wenn Diagramme wirklich auf öffentliche Seiten sollen. Reine Eigen-Doku ist mit Gitea schon abgedeckt.

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: D4rkst3r/d4rkbot#1