LOADING
560 Wörter
3 Min.

Meerjungfrau Beispiel

Mermaid Example

Übersetzungshinweis (Nicht geprüft)

Diese Seite wurde von einer KI übersetzt und kann Ungenauigkeiten enthalten.

Übersetzt aus: 🇬🇧 English (Deepseek)

Original ansehen Zurück zur Übersetzung

Vollständiger Leitfaden für Markdown mit Mermaid-Diagrammen

Dieser Artikel zeigt, wie man verschiedene komplexe Diagramme mit Mermaid in Markdown-Dokumenten erstellt, darunter Flussdiagramme, Sequenzdiagramme, Gantt-Diagramme, Klassendiagramme und Zustandsdiagramme.

Flussdiagramm Beispiel

Flussdiagramme eignen sich hervorragend zur Darstellung von Prozessen oder Algorithmusschritten.

graph TD A[Start] --> B{Condition Check} B -->|Yes| C[Process Step 1] B -->|No| D[Process Step 2] C --> E[Subprocess] D --> E subgraph E [Subprocess Details] E1[Substep 1] --> E2[Substep 2] E2 --> E3[Substep 3] end E --> F{Another Decision} F -->|Option 1| G[Result 1] F -->|Option 2| H[Result 2] F -->|Option 3| I[Result 3] G --> J[End] H --> J I --> J

Sequenzdiagramm Beispiel

Sequenzdiagramme zeigen Interaktionen zwischen Objekten im Zeitverlauf.

sequenceDiagram participant User participant WebApp participant Server participant Database User->>WebApp: Submit Login Request WebApp->>Server: Send Auth Request Server->>Database: Query User Credentials Database-->>Server: Return User Data Server-->>WebApp: Return Auth Result alt Auth Successful WebApp->>User: Show Welcome Page WebApp->>Server: Request User Data Server->>Database: Get User Preferences Database-->>Server: Return Preferences Server-->>WebApp: Return User Data WebApp->>User: Load Personalized Interface else Auth Failed WebApp->>User: Show Error Message WebApp->>User: Prompt Re-entry end

---BEGIN CHUNK---

Gantt-Diagramm Beispiel

Gantt-Diagramme eignen sich hervorragend zur Darstellung von Projektplänen und Zeitplänen.

gantt title Website Development Project Timeline dateFormat YYYY-MM-DD axisFormat %m/%d section Design Phase Requirements Analysis :a1, 2023-10-01, 7d UI Design :a2, after a1, 10d Prototype Creation :a3, after a2, 5d section Development Phase Frontend Development :b1, 2023-10-20, 15d Backend Development :b2, after a2, 18d Database Design :b3, after a1, 12d section Testing Phase Unit Testing :c1, after b1, 8d Integration Testing :c2, after b2, 10d User Acceptance Testing :c3, after c2, 7d section Deployment Production Deployment :d1, after c3, 3d Launch :milestone, after d1, 0d

---END CHUNK---

Beispiel für ein Klassendiagramm

Klassendiagramme zeigen die statische Struktur eines Systems, einschließlich Klassen, Attribute, Methoden und deren Beziehungen.

classDiagram class User { +String username +String password +String email +Boolean active +login() +logout() +updateProfile() } class Article { +String title +String content +Date publishDate +Boolean published +publish() +edit() +delete() } class Comment { +String content +Date commentDate +addComment() +deleteComment() } class Category { +String name +String description +addArticle() +removeArticle() } User "1" -- "*" Article : writes User "1" -- "*" Comment : posts Article "1" -- "*" Comment : has Article "1" -- "*" Category : belongs to

Beispiel für ein Zustandsdiagramm

Zustandsdiagramme zeigen die Abfolge von Zuständen, die ein Objekt während seines Lebenszyklus durchläuft.

stateDiagram-v2 [*] --> Draft Draft --> UnderReview : submit UnderReview --> Draft : reject UnderReview --> Approved : approve Approved --> Published : publish Published --> Archived : archive Published --> Draft : retract state Published { [*] --> Active Active --> Hidden : temporarily hide Hidden --> Active : restore Active --> [*] Hidden --> [*] } Archived --> [*]

Kreisdiagramm Beispiel

Kreisdiagramme eignen sich ideal zur Darstellung von Anteilen und prozentualen Daten.

pie title Website Traffic Sources Analysis "Search Engines" : 45.6 "Direct Access" : 30.1 "Social Media" : 15.3 "Referral Links" : 6.4 "Other Sources" : 2.6

Fazit

Mermaid ist ein leistungsstarkes Werkzeug zur Erstellung verschiedener Diagrammtypen in Markdown-Dokumenten. Dieser Artikel hat gezeigt, wie man Flussdiagramme, Sequenzdiagramme, Gantt-Diagramme, Klassendiagramme, Zustandsdiagramme und Kreisdiagramme verwendet. Diese Diagramme können Ihnen helfen, komplexe Konzepte, Prozesse und Datenstrukturen klarer darzustellen.

Um Mermaid zu verwenden, geben Sie einfach die Sprache Mermaid in einem Codeblock an und beschreiben das Diagramm mit einer prägnanten Textsyntax. Mermaid wandelt diese Beschreibungen automatisch in ansprechende visuelle Diagramme um.

Versuchen Sie, Mermaid-Diagramme in Ihrem nächsten technischen Blogbeitrag oder Ihrer Projektdokumentation zu verwenden – sie machen Ihre Inhalte professioneller und leichter verständlich!

Complete Guide to Markdown with Mermaid Diagrams

This article demonstrates how to create various complex diagrams using Mermaid in Markdown documents, including flowcharts, sequence diagrams, Gantt charts, class diagrams, and state diagrams.

Flowchart Example

Flowcharts are excellent for representing processes or algorithm steps.

graph TD A[Start] --> B{Condition Check} B -->|Yes| C[Process Step 1] B -->|No| D[Process Step 2] C --> E[Subprocess] D --> E subgraph E [Subprocess Details] E1[Substep 1] --> E2[Substep 2] E2 --> E3[Substep 3] end E --> F{Another Decision} F -->|Option 1| G[Result 1] F -->|Option 2| H[Result 2] F -->|Option 3| I[Result 3] G --> J[End] H --> J I --> J

Sequence Diagram Example

Sequence diagrams show interactions between objects over time.

sequenceDiagram participant User participant WebApp participant Server participant Database User->>WebApp: Submit Login Request WebApp->>Server: Send Auth Request Server->>Database: Query User Credentials Database-->>Server: Return User Data Server-->>WebApp: Return Auth Result alt Auth Successful WebApp->>User: Show Welcome Page WebApp->>Server: Request User Data Server->>Database: Get User Preferences Database-->>Server: Return Preferences Server-->>WebApp: Return User Data WebApp->>User: Load Personalized Interface else Auth Failed WebApp->>User: Show Error Message WebApp->>User: Prompt Re-entry end

Gantt Chart Example

Gantt charts are perfect for displaying project schedules and timelines.

gantt title Website Development Project Timeline dateFormat YYYY-MM-DD axisFormat %m/%d section Design Phase Requirements Analysis :a1, 2023-10-01, 7d UI Design :a2, after a1, 10d Prototype Creation :a3, after a2, 5d section Development Phase Frontend Development :b1, 2023-10-20, 15d Backend Development :b2, after a2, 18d Database Design :b3, after a1, 12d section Testing Phase Unit Testing :c1, after b1, 8d Integration Testing :c2, after b2, 10d User Acceptance Testing :c3, after c2, 7d section Deployment Production Deployment :d1, after c3, 3d Launch :milestone, after d1, 0d

Class Diagram Example

Class diagrams show the static structure of a system, including classes, attributes, methods, and their relationships.

classDiagram class User { +String username +String password +String email +Boolean active +login() +logout() +updateProfile() } class Article { +String title +String content +Date publishDate +Boolean published +publish() +edit() +delete() } class Comment { +String content +Date commentDate +addComment() +deleteComment() } class Category { +String name +String description +addArticle() +removeArticle() } User "1" -- "*" Article : writes User "1" -- "*" Comment : posts Article "1" -- "*" Comment : has Article "1" -- "*" Category : belongs to

State Diagram Example

State diagrams show the sequence of states an object goes through during its life cycle.

stateDiagram-v2 [*] --> Draft Draft --> UnderReview : submit UnderReview --> Draft : reject UnderReview --> Approved : approve Approved --> Published : publish Published --> Archived : archive Published --> Draft : retract state Published { [*] --> Active Active --> Hidden : temporarily hide Hidden --> Active : restore Active --> [*] Hidden --> [*] } Archived --> [*]

Pie Chart Example

Pie charts are ideal for displaying proportions and percentage data.

pie title Website Traffic Sources Analysis "Search Engines" : 45.6 "Direct Access" : 30.1 "Social Media" : 15.3 "Referral Links" : 6.4 "Other Sources" : 2.6

Conclusion

Mermaid is a powerful tool for creating various types of diagrams in Markdown documents. This article demonstrated how to use flowcharts, sequence diagrams, Gantt charts, class diagrams, state diagrams, and pie charts. These diagrams can help you express complex concepts, processes, and data structures more clearly.

To use Mermaid, simply specify the mermaid language in a code block and describe the diagram using concise text syntax. Mermaid will automatically convert these descriptions into beautiful visual diagrams.

Try using Mermaid diagrams in your next technical blog post or project documentation - they will make your content more professional and easier to understand!

Meerjungfrau Beispiel
/de-DE/posts/mermaid-example/
Author
MuxBuffer
Published at
2011-11-02
License
CC BY-NC-SA 4.0
KI-Beteiligungsindex IIIA-0
Kategorie Ohne KI
Stufe 0
Beschreibung Gar keine KI verwendet

This page may not be the latest version.

Profile Image of the Author
MuxBuffer
Muxing life, buffering thoughts.
Kategorien
Table of Contents