Skip to content

示例

🌐 Examples

本页面包含了一系列可以通过 Mermaid 及其各种应用创建的图表和示意图示例。

🌐 This page contains a collection of examples of diagrams and charts that can be created through mermaid and its myriad applications.

如果你想学习如何在网页上支持 mermaid,请阅读 初学者指南

如果你想了解 mermaid 的语法,请阅读 Diagram Syntax 部分。

基本饼图

🌐 Basic Pie Chart

代码:
mermaid
⌘ + 回车键|
代码:
mermaid
⌘ + 回车键|

基本时序图

🌐 Basic sequence diagram

代码:
mermaid
⌘ + 回车键|

基本流程图

🌐 Basic flowchart

代码:
mermaid
⌘ + 回车键|

带有一些样式的更大流程图

🌐 Larger flowchart with some styling

代码:
mermaid
⌘ + 回车键|

时序图:循环、选择和可选

🌐 SequenceDiagram: Loops, alt and opt

代码:
mermaid
⌘ + 回车键|

时序图:循环中向自身发送消息

🌐 SequenceDiagram: Message to self in loop

代码:
mermaid
⌘ + 回车键|

时序图:博客应用服务通信

🌐 Sequence Diagram: Blogging app service communication

代码:
mermaid
⌘ + 回车键|

提交流程图。

🌐 A commit flow diagram.

代码:
mermaid
⌘ + 回车键|
Opens in mermaid.ai