跳过正文
  1. 示例/

流程图和思维导图

1 分钟· loading · loading · ·
mermaid 示例 流程图 简码
Blowfish
作者
Blowfish
一个强大、轻量级的 Hugo 主题。
目录

Blowfish 使用 mermaid 简码可以调用。Blowfish 会根据配置的 colorScheme 参数自动调用 Mermaid 生成流程图或者思维导图。

有关更多详细信息,请参阅 Mermaid 简码 文档。

下面的示例是从 官方 Mermaid 文档 中选取的一小部分。您还可以在 GitHub 上 查看页面源代码 查看书写方法。

流程图
#

graph TD A[Christmas] -->|Get money| B(Go shopping) B --> C{Let me think} B --> G[/Another/] C ==>|One| D[Laptop] C -->|Two| E[iPhone] C -->|Three| F[Car] subgraph Section C D E F G end

时序图
#

sequenceDiagram autonumber par Action 1 Alice->>John: Hello John, how are you? and Action 2 Alice->>Bob: Hello Bob, how are you? end Alice->>+John: Hello John, how are you? Alice->>+John: John, can you hear me? John-->>-Alice: Hi Alice, I can hear you! Note right of John: John is perceptive John-->>-Alice: I feel great! loop Every minute John-->Alice: Great! end

类图
#

classDiagram Animal "1" <|-- Duck Animal <|-- Fish Animal <--o Zebra Animal : +int age Animal : +String gender Animal: +isMammal() Animal: +mate() class Duck{ +String beakColor +swim() +quack() } class Fish{ -int sizeInFeet -canEat() } class Zebra{ +bool is_wild +run() }

实体关系图
#

erDiagram CUSTOMER }|..|{ DELIVERY-ADDRESS : has CUSTOMER ||--o{ ORDER : places CUSTOMER ||--o{ INVOICE : "liable for" DELIVERY-ADDRESS ||--o{ ORDER : receives INVOICE ||--|{ ORDER : covers ORDER ||--|{ ORDER-ITEM : includes PRODUCT-CATEGORY ||--|{ PRODUCT : contains PRODUCT ||--o{ ORDER-ITEM : "ordered in"

相关文章

图表
1 分钟· loading · loading
表格 示例 图片 简码
Emoji 表情符号 🪂
1 分钟· loading · loading
emoji 示例