Mermaid de

Mermaid

🌐 Diese Seite auf: English · Português · Español · Français · Deutsch

Seit 0.2.0-preview.26

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:

graph TD
  A[mermaid-Quelle] --> B{bekannte Grammatik?}
  B -->|flowchart, sequence| C(Parsen + lösen)
  B -->|alles andere| D[Den Zaun als Code zeigen]
  C --> E((Boxen, Text, Vektoren))

Loading

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
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).