diff options
author | Christoph Cullmann <cullmann@kde.org> | 2024-04-28 17:33:09 +0200 |
---|---|---|
committer | Christoph Cullmann <cullmann@kde.org> | 2024-04-28 17:33:09 +0200 |
commit | e77051ccc4b47951bfa4fde2be436b1bb2fb113b (patch) | |
tree | f0b75ee3521da9c8cd39dac4359212348f70e4e8 /themes/blowfish/exampleSite/content/samples/diagrams-flowcharts/index.zh-cn.md | |
parent | 4b355837824ac2422d371acef790f0f4249255c7 (diff) |
use https://github.com/nunocoracao/blowfish.git
Diffstat (limited to 'themes/blowfish/exampleSite/content/samples/diagrams-flowcharts/index.zh-cn.md')
-rwxr-xr-x | themes/blowfish/exampleSite/content/samples/diagrams-flowcharts/index.zh-cn.md | 102 |
1 files changed, 102 insertions, 0 deletions
diff --git a/themes/blowfish/exampleSite/content/samples/diagrams-flowcharts/index.zh-cn.md b/themes/blowfish/exampleSite/content/samples/diagrams-flowcharts/index.zh-cn.md new file mode 100755 index 0000000..bd9f9bb --- /dev/null +++ b/themes/blowfish/exampleSite/content/samples/diagrams-flowcharts/index.zh-cn.md @@ -0,0 +1,102 @@ +--- +title: "流程图和思维导图" +date: 2019-03-06 +description: "Blowfish 中 Mermaid 的使用指南" +summary: "使用 Mermaid 可以轻松地将图表和流程图添加到文章中。" +tags: ["mermaid", "示例", "流程图", "简码"] +type: 'sample' +--- + +Blowfish 使用 `mermaid` 简码可以调用。Blowfish 会根据配置的 `colorScheme` 参数自动调用 Mermaid 生成流程图或者思维导图。 + +有关更多详细信息,请参阅 [Mermaid 简码]({{< ref "docs/shortcodes#mermaid" >}}) 文档。 + +下面的示例是从[官方 Mermaid 文档](https://mermaid-js.github.io/mermaid/) 中选取的一小部分。您还可以在 GitHub 上[查看页面源代码](https://raw.githubusercontent.com/nunocoracao/blowfish/main/exampleSite/content/samples/diagrams-flowcharts/index.md) 查看书写方法。 + +## 流程图 + +<div style="background-color:white; padding: 20px"> +{{< mermaid >}} +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 +{{< /mermaid >}} +</div> + +## 时序图 + +<div style="background-color:white; padding: 20px"> +{{< mermaid >}} +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 +{{< /mermaid >}} +</div> + +## 类图 + +<div style="background-color:white; padding: 20px"> +{{< mermaid >}} +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() +} +{{< /mermaid >}} +</div> + +## 实体关系图 + +<div style="background-color:white; padding: 20px"> +{{< mermaid >}} +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" +{{< /mermaid >}} +</div> + |