跳过正文
  1. 示例/

流程图和思维导图

1 分钟·
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 分钟
表格 示例 图片 简码
简码
10 分钟
简码 Mermaid 图标 Lead Docs
Emoji 表情符号 🪂
1 分钟
Emoji 示例
内容示例
8 分钟
内容 示例