Markdown Mermaid 图表完整指南#

本文演示了如何在 Markdown 文档中使用 Mermaid 创建各种复杂的图表，包括流程图、时序图、甘特图、类图和状态图。

流程图示例#

流程图非常适合表示流程或算法步骤。

graph TD A[开始] --> B{条件检查} B -->|是| C[处理步骤 1] B -->|否| D[处理步骤 2] C --> E[子流程] D --> E subgraph E [子流程详情] E1[子步骤 1] --> E2[子步骤 2] E2 --> E3[子步骤 3] end E --> F{另一个决策} F -->|选项 1| G[结果 1] F -->|选项 2| H[结果 2] F -->|选项 3| I[结果 3] G --> J[结束] H --> J I --> J

时序图示例#

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

结论#

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!