Mermaid, vom Design System gezeichnet: kein mermaid.js, kein SVG-Dokument, kein zielspezifischer Renderer. Ein Diagramm ist einfach mehr UI: Knoten sind Boxen auf den Flächen-Tokens des Themes, die Entscheidungsraute ist ein Vector mit einem einzigen Pfad (derselbe Vektor, den Tür-Icons auf beiden Zielen nutzen), jede Kante ist EIN gestrichener kubischer Vector mit einer Vektor-Pfeilspitze, Labels sind Text. Ein Baum, realisiert vom Web-Realisierer und von Photon, gethemt vom eigenen IAppTheme der Anwendung.

Innerhalb von Markdown geschieht es automatisch (ein mermaid -Zaun rendert als das Diagramm), und Mermaid(source)` funktioniert allein. Diese Seite trägt ihren eigenen Beweis:

flowchart, sequence

alles andere

mermaid-Quelle

bekannte Grammatik?

Parsen + lösen

Den Zaun als Code zeigen

Boxen, Text, Vektoren

GitHub zeichnet den Zaun oben mit mermaid.js; die Dokumentationsseite zeichnet DENSELBEN Zaun mit der eigenen Komponente des SDK: zwei Renderer, eine Quelle, und genau darum geht es.

Mermaid(source) // allein

Markdown(chatAnswer) // ein ```mermaid-Zaun darin rendert nativ

Die v1-Grammatik

Gesprochen

Anmerkungen

graph TD / graph TB / flowchart LR

die zwei Flussachsen; BT/RL fallen zurück

A[rect], A(rounded), A((circle)), A{diamond}

Labels in Anführungszeichen verlieren ihre Anführungszeichen

A --> B --> C, A --- B, A -->|label| B

Ketten; offene Verbindungen zeichnen keine Spitze; gestrichelt und dick zeichnen im einen Linienstil

sequenceDiagram, participant A as Alice

Nachrichten deklarieren ungesehene Teilnehmer selbst

A->>B: text, A-->>B: text, Nachrichten an sich selbst

eine Nachricht an sich selbst läuft hinaus und zurück

%%-Kommentare, subgraph/end, style, click, Notizen

übersprungen, nie fatal, und der Graph zeichnet weiterhin

Nachsichtig per Kontrakt: Eine Grammatik außerhalb der Teilmenge (gantt, classDiagram, state, pie) rendert als der eingezäunte Code, aus dem sie kam, sodass eine Chat-Antwort mit einem exotischen Diagramm zu etwas Wahrem zurückfällt, nie zu einem kaputten Bild.

Layout-Parität ist gepinnt, nicht erhofft

Parser und Layout laufen auf jeder Seite (C# für SSR und Photon, der transpilierte Zwilling im Browser), sodass die Mathematik des Layouts durchweg aus Ganzzahlen und exakten Hälften besteht: Knotengrößen kommen aus einer flachen Schätzung des Zeichenvorschubs, Positionen summieren sich durch Addition, und die REIHENFOLGE nach Baryzentrum wird durch kreuzweise multiplizierte Ganzzahlsummen entschieden (sumA·countB < sumB·countA), nie durch eine Division. Das Ranking ist Sugiyama-lite über dem DAG: Ein iterativer DFS markiert Kanten, die einen Zyklus schließen, sodass eine Rückkante nach oben geroutet wird, statt jeden Rang vor ihr aufzublähen.

Die gepinnte Fixture (__fixtures__/mermaid-layout.txt, mit EQ_UPDATE_MERMAID_FIXTURE=1 neu erzeugen) wird von MermaidTests.cs und mermaid.spec.ts als zeichenweise identisch behauptet. Hätten die zwei Kompilierungen je eine Box anders platziert, bricht eine Suite, bevor eine Seite bei der Hydration springt.

Die Kanten krümmen sich

Seit 0.2.0-preview.28

Eine Flowchart-Kante ist eine Kubik, das S, das jedes Flowchart-Werkzeug zeichnet, als ein einziger Vector mit freiem Seitenverhältnis gestrichen, auf beiden Zielen. Der Zaun, den das schließt, las sich einmal "Kanten sind orthogonal, die gekrümmten Splines bräuchten einen gestrichenen Pfadknoten, den das Vokabular noch nicht hat": Das Vokabular hat ihn nun, und diese Komponente war der Fall, der ihn benannte. Die Parität hält so, wie hier alles andere hält: Der Pfad-String wird auf beiden Seiten aus GANZZAHLEN gebaut (ein Float, durch die Kultur einer Maschine formatiert, liest sich auf der Hälfte der Laptops der Welt als 72,5), und die gepinnte Fixture trägt Box und Pfad jeder Kurve wörtlich.

Zäune (v1, absichtlich)

•

Die Textbreite ist eine Schätzung, keine Messung: ehrlich für ein Diagramm, überall deterministisch.

•

Rauten sind von Bauart quadratisch (ein Vector zeichnet in eine quadratische Box); lange Entscheidungslabels werden mit Auslassungspunkten gekürzt.

•

Eine Schachtelungsstufe für die Geschwister der Flowchart-Ränge; die GRUPPIERUNG per subgraph wird übersprungen (Anweisungen darin parsen weiterhin).

PREVIOUSMarkdown

NEXTE-Mail-Rendering

ON THIS PAGE

Die v1-Grammatik

Layout-Parität ist gepinnt, nicht erhofft

Die Kanten krümmen sich

Zäune (v1, absichtlich)