KUKANILEA Diagramm aus Text ist eine eigenständige Anwendung, die auf der freien,
MIT-lizenzierten Bibliothek Mermaid für das Parsen der Diagramm-Text-Syntax und das
Rendern als SVG aufbaut. Eigenes Seiten-Layout/Branding ("KUKANILEA Diagramm aus Text",
kein Bibliotheks- oder Produktname des Upstream-Projekts im Produktnamen), eigener
Editor-/Vorschau-Split, eigene Toolbar mit Diagrammtyp-Vorlagen, eigene
Fehleranzeige-Aufbereitung sowie eigener SVG-/PNG-Export und eigenes
Speicherformat (.mmd-Textdatei bzw. JSON-Projektdatei). Es werden ausschließlich lokal
gebündelte JavaScript-Ressourcen ausgeliefert; es findet kein Laufzeit-Nachladen von
Schriftarten, Icons oder sonstigen Assets von einer externen CDN statt
(Local-First-Policy). Der eingegebene Diagramm-Text und das gerenderte Diagramm werden
ausschließlich lokal im Browser verarbeitet, nicht an einen Server übertragen. Das
Autosave-Feature speichert den aktuellen Entwurf ausschließlich lokal in
localStorage des Browsers, ohne Cloud-Synchronisation.
mermaid, Tag
mermaid@11.17.2, Commit
dcb694ddb58dc5ad3502e7e903cac05fd812eac3)assets/js/diagramm-aus-text.js (Bundling ohne Code-Splitting, ein einziges
JS-Modul). Konfiguriert mit securityLevel: "strict" (HTML in
Diagramm-Labels wird escaped, keine Ausführung eingebetteter click-Direktiven/Skripte)
sowie htmlLabels: false (Text-Labels als reine SVG-<text>-Elemente
statt HTML-<foreignObject>, siehe unten).Sicherheitsprüfung (CSP): die Content-Security-Policy dieser Anwendung
verbietet 'unsafe-eval' (kein eval(), kein
new Function()). Mermaid selbst sowie dessen Abhängigkeiten (u. a. eine
intern gebündelte Lodash-Hilfsfunktion zur Ermittlung des globalen Objekts) enthalten im
Quelltext zwar das Muster Function("return this")() — dieses wird jedoch laut
Quellcode ausschließlich als Fallback verwendet, falls weder global noch
self im Ausführungskontext vorhanden sind. In jedem Browser ist
self immer definiert, wodurch dieser Fallback zur Laufzeit nie erreicht wird.
Dies wurde durch einen Live-Test aller unten aufgeführten Diagrammtypen unter der exakten
Produktions-CSP (script-src 'self', ohne 'unsafe-eval')
verifiziert: 0 CSP-Verletzungen in der Browser-Konsole. Diese Messung ist seit dem
2026-09-02 ein automatischer Regressionstest und keine einmalige Beobachtung mehr:
tests/e2e/diagramm-aus-text-lokal.spec.mjs lädt die Seite unter genau dieser
CSP und lässt alle zehn Diagrammtypen rendern.
Sicherheitsstand: am 2026-09-02 wurde die Bibliothek von 11.16.0 auf
11.17.2 angehoben. 11.16.0 war von fünf veröffentlichten Advisories betroffen, die alle in
11.16.1 behoben wurden: CVE-2026-50159 (CSS-Injection auf Geschwisterelemente des
Diagramms), CVE-2026-71436 (Endlosschleife in XY-Charts), CVE-2026-71437 und
CVE-2026-71438 (Prototype Pollution in Architekturdiagrammen beziehungsweise über die
Konfigurations-API) sowie CVE-2026-71439 (Überlastung durch Radardiagramme). Der zuletzt
genannte Fall war im ausgelieferten Stand reproduzierbar: ein Radardiagramm mit sehr großem
ticks-Wert legte den Browser-Tab dauerhaft still. Weil sich Diagramm-Text auch
aus einer fremden .mmd- oder Projektdatei laden lässt, war das kein reiner
Komfortfehler. Mit 11.17.2 rendert derselbe Text in weniger als einer Sekunde; ein
Regressionstest hält den Fall fest.
Bekannte Grenze (ehrlich dokumentiert): der PNG-Export rastert das
SVG über ein <canvas>-Element. Beim Diagrammtyp User Journey löst das
eine browserseitige Sicherheitsbeschränkung aus ("tainted canvas", kein CSP- oder
Netzwerkproblem, sondern ein generelles Verhalten von Chromium und Firefox bei
SVG-Dateien mit eingebettetem HTML in <canvas>). Ursache ist der
Renderer dieses Diagrammtyps: er zeichnet die Abschnitts- und Aufgabenbeschriftungen
weiterhin als HTML-Elemente in <foreignObject> und folgt darin der
Einstellung htmlLabels: false nicht — gemessen am 2026-09-02 an der
gerenderten Datei (neun <foreignObject>-Elemente, Inhalt
<div class="journey-section"> beziehungsweise
<div class="task">). Die Anwendung fängt den Fall ab und zeigt eine
verständliche Fehlermeldung mit Verweis auf den SVG-Export, der für jeden
Diagrammtyp uneingeschränkt funktioniert (keine Rasterung, daher kein Taint-Risiko). Dass
der PNG-Export bei den übrigen neun Diagrammtypen — Flowchart, Sequenzdiagramm,
Klassendiagramm, Zustandsdiagramm, ER-Diagramm, Gantt, Kreisdiagramm, Mindmap und
Zeitleiste — eine gültige PNG-Datei liefert, prüft seit dem 2026-09-02 ein Test bei jedem
Lauf nach, statt es einmal beobachtet zu haben.
Exportmaße: das exportierte SVG trägt seit dem 2026-09-02 absolute
Breiten- und Höhenangaben aus der viewBox. Zuvor wurde die Vorschaufassung
unverändert gespeichert (width="100%", keine Höhe) — richtig für die
Einbettung in diese Seite, aber ohne intrinsische Größe als Datei: Textverarbeitung,
Vektoreditor und Browser setzten dann ihre Ersatzgröße ein und stellten das Diagramm
verkleinert dar (gemessen: 95 × 150 statt 303 × 479 Punkte).
Wird geladen …