mermaid
11.4.0
Generieren Sie Diagramme aus Markdown-ähnlichem Text.
Live-Editor!
Dokumentation | Erste Schritte | CDN | ? Begleiten Sie uns
简体中文
Probieren Sie Live Editor-Vorschauen zukünftiger Versionen aus: Entwickeln | Nächste
? Mermaid wurde nominiert und gewann die JS Open Source Awards (2019) in der Kategorie „Der aufregendste Einsatz von Technologie“!!!
Vielen Dank an alle Beteiligten, Leute, die Pull-Requests durchführen, Leute, die Fragen beantworten!
Um
Beispiele
Freigeben
Verwandte Projekte
Mitwirkende
Sicherheits- und Tresordiagramme
Schwachstellen melden
Anerkennung
Mermaid ist ein JavaScript-basiertes Diagramm- und Diagrammtool, das Markdown-inspirierte Textdefinitionen und einen Renderer verwendet, um komplexe Diagramme zu erstellen und zu ändern. Der Hauptzweck von Mermaid besteht darin, die Dokumentation dabei zu unterstützen, mit der Entwicklung Schritt zu halten.
Doc-Rot ist ein Catch-22, bei dessen Lösung Mermaid hilft.
Diagrammerstellung und Dokumentation kosten wertvolle Entwicklerzeit und veralten schnell. Aber das Fehlen von Diagrammen oder Dokumenten beeinträchtigt die Produktivität und beeinträchtigt das Lernen der Organisation.
Mermaid geht dieses Problem an, indem es Benutzern ermöglicht, leicht veränderbare Diagramme zu erstellen. Es kann auch Teil von Produktionsskripten (und anderen Codeteilen) werden.
Mit Mermaid können auch Nicht-Programmierer problemlos detaillierte Diagramme über den Mermaid Live Editor erstellen.
Für Video-Tutorials besuchen Sie unsere Tutorials-Seite. Verwenden Sie Mermaid mit Ihren Lieblingsanwendungen. Sehen Sie sich die Liste der Integrationen und Verwendungsmöglichkeiten von Mermaid an.
Sie können Mermaid auch in GitHub sowie viele Ihrer anderen Lieblingsanwendungen verwenden – schauen Sie sich die Liste der Integrationen und Verwendungen von Mermaid an.
Eine detailliertere Einführung in Mermaid und einige seiner grundlegenderen Verwendungsmöglichkeiten finden Sie im Einsteigerhandbuch, zur Verwendung und in den Tutorials.
Unsere visuellen PR-Regressionstests werden von Argos mit seinem großzügigen Open-Source-Plan unterstützt. Es macht die Überprüfung von PRs mit visuellen Änderungen zum Kinderspiel.
In unserem Release-Prozess verlassen wir uns stark auf visuelle Regressionstests mit Applitools. Applitools ist ein großartiger Dienst, der einfach zu verwenden und in unsere Tests zu integrieren ist.
Im Folgenden finden Sie einige Beispiele für Diagramme, Diagramme und Grafiken, die mit Mermaid erstellt werden können. Klicken Sie hier, um in die Textsyntax zu springen.
flowchart LR
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2] Flussdiagramm LR
A[Hard] ->|Text| B (rund)
B -> C{Entscheidung}
C -->|Eins| D[Ergebnis 1]
C -->|Zwei| E[Ergebnis 2] LadensequenceDiagram Alice->>John: Hello John, how are you? loop HealthCheck John->>John: Fight against hypochondria end Note right of John: Rational thoughts! John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good!
Sequenzdiagramm
Alice->>John: Hallo John, wie geht es dir?
Schleife HealthCheck
John->>John: Kampf gegen Hypochondrie
Ende
Hinweis rechts von John: Rationale Gedanken!
John-->>Alice: Großartig!
John->>Bob: Wie wäre es mit dir?
Bob-->>John: Sehr gut! Ladengantt section Section Completed :done, des1, 2014-01-06,2014-01-08 Active :active, des2, 2014-01-07, 3d Parallel 1 : des3, after des1, 1d Parallel 2 : des4, after des1, 1d Parallel 3 : des5, after des3, 1d Parallel 4 : des6, after des4, 1d
Gantt
Abschnitt Abschnitt
Abgeschlossen: erledigt, des1, 06.01.2014, 08.01.2014
Aktiv: aktiv, des2, 07.01.2014, 3d
Parallel 1: des3, nach des1, 1d
Parallel 2: des4, nach des1, 1d
Parallel 3: des5, nach des3, 1d
Parallel 4: des6, nach des4, 1d LadenclassDiagram
Class01 <|-- AveryLongClass : Cool
<<Interface>> Class01
Class09 --> C2 : Where am I?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
class Class10 {
<<service>>
int id
size()
} Klassendiagramm
Class01 <|-- AveryLongClass: Cool
<<Schnittstelle>> Klasse01
Klasse 09 --> C2: Wo bin ich?
Klasse 09 --* C3
Klasse09 --|> Klasse07
Klasse07: gleich()
Klasse07: Object[] elementData
Klasse01: size()
Klasse01: int Schimpanse
Klasse01: int Gorilla
Klasse Klasse10 {
<<Dienst>>
int-ID
Größe()
} LadenstateDiagram-v2 [*] --> Still Still --> [*] Still --> Moving Moving --> Still Moving --> Crash Crash --> [*]
stateDiagram-v2
[*] -> Still
Immer noch -> [*]
Immer noch -> Umzug
Umzug -> Still
Bewegen -> Absturz
Absturz -> [*] Ladenpie "Dogs" : 386 "Cats" : 85.9 "Rats" : 15
Torte
„Hunde“: 386
„Katzen“: 85,9
„Ratten“: 15 Ladengantt title Git Issues - days since last update dateFormat X axisFormat %s section Issue19062 71 : 0, 71 section Issue19401 36 : 0, 36 section Issue193 34 : 0, 34 section Issue7441 9 : 0, 9 section Issue1300 5 : 0, 5
Gantt
Titel Git-Probleme – Tage seit dem letzten Update
dateFormat X
Achsenformat %s
Abschnitt Issue19062
71:0, 71
Abschnitt Ausgabe 19401
36:0, 36
Abschnitt Ausgabe 193
34:0, 34
Abschnitt Issue7441
9 : 0, 9
Abschnitt Issue1300
5 : 0, 5 Ladenjourney title My working day section Go to work Make tea: 5: Me Go upstairs: 3: Me Do work: 1: Me, Cat section Go home Go downstairs: 5: Me Sit down: 3: Me
Reise
Titel Mein Arbeitstag
Abschnitt Geh zur Arbeit
Tee kochen: 5: Ich
Nach oben gehen: 3: Ich
Arbeit erledigen: 1: Ich, Katze
Abschnitt Geh nach Hause
Geh nach unten: 5: Ich
Setz dich: 3: Ich LadenC4Context
title System Context diagram for Internet Banking System
Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
Person(customerB, "Banking Customer B")
Person_Ext(customerC, "Banking Customer C")
System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")
Enterprise_Boundary(b1, "BankBoundary") {
SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
System_Boundary(b2, "BankBoundary2") {
System(SystemA, "Banking System A")
System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts.")
}
System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
Boundary(b3, "BankBoundary3", "boundary") {
SystemQueue(SystemF, "Banking System F Queue", "A system of the bank, with personal bank accounts.")
SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
}
}
BiRel(customerA, SystemAA, "Uses")
BiRel(SystemAA, SystemE, "Uses")
Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
Rel(SystemC, customerA, "Sends e-mails to") C4Context
Titel Systemkontextdiagramm für Internet-Banking-System
Person(KundeA, „Bankkunde A“, „Ein Kunde der Bank, mit persönlichen Bankkonten.“)
Person(KundeB, „Bankkunde B“)
Person_Ext(customerC, „Bankkunde C“)
System (SystemAA, „Internet-Banking-System“, „Ermöglicht Kunden, Informationen über ihre Bankkonten einzusehen und Zahlungen durchzuführen.“)
Person(KundeD, „Bankkunde D“, „Ein Kunde der Bank, <br/> mit persönlichen Bankkonten.“)
Enterprise_Boundary(b1, "BankBoundary") {
SystemDb_Ext(SystemE, „Mainframe Banking System“, „Speichert alle Kernbankinformationen über Kunden, Konten, Transaktionen usw.“)
System_Boundary(b2, "BankBoundary2") {
System(SystemA, „Bankensystem A“)
System(SystemB, „Bankensystem B“, „Ein System der Bank, mit persönlichen Bankkonten.“)
}
System_Ext(SystemC, „E-Mail-System“, „Das interne Microsoft Exchange-E-Mail-System.“)
SystemDb(SystemD, „Banking System D Database“, „Ein System der Bank, mit persönlichen Bankkonten.“)
Boundary(b3, „BankBoundary3“, „boundary“) {
SystemQueue(SystemF, „Banking System F Queue“, „Ein System der Bank, mit persönlichen Bankkonten.“)
SystemQueue_Ext(SystemG, „Banking System G Queue“, „Ein System der Bank, mit persönlichen Bankkonten.“)
}
}
BiRel(KundeA, SystemAA, „Verwendungen“)
BiRel(SystemAA, SystemE, „Uses“)
Rel(SystemAA, SystemC, „Sendet E-Mails“, „SMTP“)
Rel(SystemC, customerA, „Sendet E-Mails an“) LadenFür diejenigen, die die Erlaubnis dazu haben:
Versionsnummer in package.json aktualisieren.
npm veröffentlichen
Der obige Befehl generiert Dateien im dist Ordner und veröffentlicht sie auf https://www.npmjs.com.
Befehlszeilenschnittstelle
Live-Editor
HTTP-Server
Mermaid ist eine wachsende Community und nimmt immer neue Mitwirkende auf. Es gibt viele verschiedene Möglichkeiten zu helfen und wir sind immer auf der Suche nach zusätzlichen Händen! Schauen Sie sich dieses Problem an, wenn Sie wissen möchten, wo Sie mit der Hilfe beginnen können.
Detaillierte Informationen zur Spendenmöglichkeit finden Sie im Spendenleitfaden
Bei öffentlichen Websites kann es schwierig sein, Text von Benutzern im Internet abzurufen und diesen Inhalt für die spätere Präsentation in einem Browser zu speichern. Der Grund dafür ist, dass der Benutzerinhalt eingebettete Schadskripte enthalten kann, die ausgeführt werden, wenn die Daten angezeigt werden. Für Mermaid stellt dies ein Risiko dar, insbesondere da Meerjungfrau-Diagramme viele Zeichen enthalten, die in HTML verwendet werden, was die Standardhygiene unbrauchbar macht und auch die Diagramme beschädigt. Wir bemühen uns weiterhin, den eingehenden Code zu bereinigen und den Prozess weiter zu verfeinern, es ist jedoch schwierig zu garantieren, dass es keine Lücken gibt.
Als zusätzliche Sicherheitsstufe für Websites mit externen Benutzern führen wir gerne eine neue Sicherheitsstufe ein, bei der das Diagramm in einem Sandbox-Iframe gerendert wird, wodurch verhindert wird, dass Javascript im Code ausgeführt wird. Dies ist ein großer Fortschritt für mehr Sicherheit.
Leider kann man nicht gleichzeitig einen Kuchen essen und essen, was in diesem Fall bedeutet, dass einige der interaktiven Funktionen zusammen mit dem möglichen Schadcode blockiert werden.
Um eine Sicherheitslücke zu melden, senden Sie bitte eine E-Mail an [email protected] mit einer Beschreibung des Problems, den Schritten, die Sie zur Erstellung des Problems unternommen haben, den betroffenen Versionen und, falls bekannt, Abhilfemaßnahmen für das Problem.
Eine kurze Anmerkung von Knut Sveidqvist:
Vielen Dank an die Projekte d3 und dagre-d3 für die Bereitstellung des grafischen Layouts und der Zeichnungsbibliotheken!
Vielen Dank auch an das js-sequence-diagram-Projekt für die Verwendung der Grammatik für die Sequenzdiagramme. Vielen Dank an Jessica Peter für die Inspiration und den Ausgangspunkt für die Gantt-Darstellung.
Vielen Dank an Tyler Long, der seit April 2017 mit uns zusammenarbeitet.
Vielen Dank an die ständig wachsende Liste von Mitwirkenden, die das Projekt so weit gebracht haben!
Mermaid wurde von Knut Sveidqvist zur einfacheren Dokumentation erstellt.
