Diagramme aus markdown-ähnlichem Text generieren.
📖 Deutsche Dokumentation | 🚀 Erste Schritte | 🌐 CDN | 🙌 Komm zu uns
Versuchen Sie die Live-Editor-Vorschauen künftiger Versionen: Live-Editor
🏆 Mermaid wurde nominiert und gewann die JS Open Source Awards (2019) in der Kategorie "Die aufregendste Nutzung von Technologie"!!!
Danke an alle Beteiligten, die Personen, die Pull-Requests einreichen und die Fragen beantworten! 🙏
Expand contents
Mermaid ist ein Diagramm- und Chart-Tool, das auf JavaScript basiert und Markdown-inspirierte Textdefinitionen und einen Renderer verwendet, um komplexe Diagramme zu erstellen und zu modifizieren. Der Hauptzweck von Mermaid besteht darin, die Dokumentation mit der Entwicklung in Einklang zu bringen.
Doc-Rot ist ein Catch-22, das Mermaid zu lösen hilft.
Das Diagramm und die Dokumentation kosten wertvolle Entwicklerzeit und werden schnell veraltet.
Aber keine Diagramme oder Dokumente zu haben, verringert die Produktivität und schadet dem organisatorischen Lernen.
Mermaid spricht dieses Problem an, indem es den Benutzern ermöglicht, leicht modifizierbare Diagramme zu erstellen. Es kann auch Teil von Produktionsskripten (und anderen Code-Teilen) werden.
Mermaid ermöglicht es sogar Nicht-Programmierern, detaillierte Diagramme einfach über den Mermaid Live Editor zu erstellen.
Für Video-Tutorials besuche unsere Tutorials Seite.
Verwende Mermaid mit deinen bevorzugten Anwendungen, schaue dir die Liste der Integrationen und Anwendungen von Mermaid an.
Du kannst Mermaid auch innerhalb von GitHub sowie von vielen deiner anderen bevorzugten Anwendungen verwenden—schau dir die Liste der Integrationen und Anwendungen von Mermaid an.
Für eine detailliertere Einführung in Mermaid und einige seiner grundlegenden Verwendungsmöglichkeiten siehe die Einsteigeranleitung, Verwendung und Tutorials.
Unser PR Visual Regression Testing wird von Argos mit ihrem großzügigen Open-Source-Plan unterstützt. Es macht den Prozess der Ü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 benutzen und in unsere Tests zu integrieren war.
Die folgenden sind einige Beispiele der Diagramme, Charts und Grafiken, die mit Mermaid erstellt werden können. Klicken Sie hier, um in die Text-Syntax zu springen.
Flussdiagramm [docs - live editor]
flowchart LR
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]
flowchart LR
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]
Sequenzdiagramm [docs - live editor]
sequenceDiagram
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!
sequenceDiagram
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!
Gantt-Diagramm [docs - live editor]
gantt
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
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
Klassendiagramm [docs - live editor]
classDiagram
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()
}
classDiagram
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()
}
Zustandsdiagramm [docs - live editor]
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
Tortendiagramme [docs - live editor]
pie
"Dogs" : 386
"Cats" : 85.9
"Rats" : 15
pie
"Dogs" : 386
"Cats" : 85.9
"Rats" : 15
Git graph [experimentell - live editor]
Gantt-Diagramme (unter Verwendung von Gantt-Diagramm) [docs - live editor]
gantt
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
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
Benutzerreise-Diagramm [docs - live editor]
journey
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
journey
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
C4-Diagramme [Dokumente]
C4Context
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
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")
Für diejenigen, die die Berechtigung dazu haben:
Aktualisiere die Versionsnummer in der package.json.
npm publishDer oben genannte Befehl generiert Dateien im dist-Ordner und veröffentlicht sie auf https://www.npmjs.com.
Mermaid ist eine wachsende Community und akzeptiert immer neue Mitwirkende. Es gibt viele verschiedene Möglichkeiten, zu helfen, und wir suchen stets nach weiteren Händen! Schaue dir dieses Problem an, wenn du wissen möchtest, wo du helfen kannst.
Detaillierte Informationen darüber, wie man beitragen kann, findest du im Beitragsleitfaden
Für öffentliche Seiten kann es riskant sein, Text von Benutzern im Internet abzurufen, diesen Inhalt zu speichern und später in einem Browser darzustellen. Der Grund dafür ist, dass der Benutzerinhalt eingebettete schädliche Skripte enthalten kann, die ausgeführt werden, wenn die Daten angezeigt werden. Für Mermaid ist dies ein Risiko, insbesondere da Mermaid-Diagramme viele Zeichen enthalten, die in HTML verwendet werden, was die Standard-Sanitärmaßnahmen unbrauchbar macht, da sie auch die Diagramme beschädigt. Wir bemühen uns weiterhin, den eingehenden Code zu reinigen und den Prozess ständig zu verfeinern, aber es ist schwer zu garantieren, dass es keine Schwachstellen gibt.
Als zusätzliche Sicherheitsstufe für Seiten mit externen Benutzern freuen wir uns, ein neues Sicherheitsniveau vorzustellen, bei dem das Diagramm in einem sandboxed iframe gerendert wird, wodurch das Ausführen von JavaScript im Code verhindert wird. Dies ist ein großer Schritt nach vorne für eine bessere Sicherheit.
Leider kann man nicht gleichzeitig ein Stück Kuchen haben und es essen, was in diesem Fall bedeutet, dass einige der interaktiven Funktionen blockiert werden, zusammen mit dem möglichen schädlichen Code.
Um eine Schwachstelle zu melden, sende bitte eine E-Mail an [email protected] mit einer Beschreibung des Problems, den Schritten, die du unternommen hast, um das Problem zu erstellen, betroffenen Versionen und falls bekannt, Gegenmaßnahmen für das Problem.
Eine kurze Notiz von Knut Sveidqvist:
Many thanks to the d3 and dagre-d3 projects for providing the graphical layout and drawing libraries!
Thanks also to the js-sequence-diagram project for usage of the grammar for the sequence diagrams. Thanks to Jessica Peter for inspiration and starting point for gantt rendering.
Thank you to Tyler Long who has been a collaborator since April 2017.
Thank you to the ever-growing list of contributors that brought the project this far!
Mermaid wurde von Knut Sveidqvist zur einfacheren Dokumentation erstellt.