This commit is contained in:
parent
4b35583782
commit
e77051ccc4
1987 changed files with 1147290 additions and 5648 deletions
102
themes/blowfish/exampleSite/content/samples/diagrams-flowcharts/index.it.md
Executable file
102
themes/blowfish/exampleSite/content/samples/diagrams-flowcharts/index.it.md
Executable file
|
|
@ -0,0 +1,102 @@
|
|||
---
|
||||
title: "Diagrams and Flowcharts"
|
||||
date: 2019-03-06
|
||||
description: "Guide to Mermaid usage in Blowfish"
|
||||
summary: "It's easy to add diagrams and flowcharts to articles using Mermaid."
|
||||
tags: ["mermaid", "sample", "diagram", "shortcodes"]
|
||||
type: 'sample'
|
||||
---
|
||||
|
||||
Mermaid diagrams are supported in Blowfish using the `mermaid` shortcode. Simply wrap the diagram markup within the shortcode. Blowfish automatically themes Mermaid diagrams to match the configured `colorScheme` parameter.
|
||||
|
||||
Refer to the [mermaid shortcode]({{< ref "docs/shortcodes#mermaid" >}}) docs for more details.
|
||||
|
||||
The examples below are a small selection taken from the [official Mermaid docs](https://mermaid-js.github.io/mermaid/). You can also [view the page source](https://raw.githubusercontent.com/nunocoracao/blowfish/main/exampleSite/content/samples/diagrams-flowcharts/index.md) on GitHub to see the markup.
|
||||
|
||||
## Flowchart
|
||||
|
||||
<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>
|
||||
|
||||
## Sequence diagram
|
||||
|
||||
<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>
|
||||
|
||||
## Class diagram
|
||||
|
||||
<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>
|
||||
|
||||
## Entity relationship diagram
|
||||
|
||||
<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>
|
||||
|
||||
102
themes/blowfish/exampleSite/content/samples/diagrams-flowcharts/index.ja.md
Executable file
102
themes/blowfish/exampleSite/content/samples/diagrams-flowcharts/index.ja.md
Executable file
|
|
@ -0,0 +1,102 @@
|
|||
---
|
||||
title: "ダイアグラムとフローチャート"
|
||||
date: 2019-03-06
|
||||
description: "Blowfish での Mermaid の利用方法についてのガイド"
|
||||
summary: "Mermaid を利用して簡単に図やフローチャートを記事に追加する方法。"
|
||||
tags: ["mermaid", "sample", "diagram", "shortcodes"]
|
||||
type: 'sample'
|
||||
---
|
||||
|
||||
Mermaid 図は `mermaid` ショートコードを使うことで Blowfish でサポートされています。ダイヤグラムのマークアップをショートコードを囲むだけです。 Blowfish は設定された `colorScheme` パラメータに合うように自動T系に 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[クリスマス] -->|収入| B(買い物にいく)
|
||||
B --> C{考える}
|
||||
B --> G[/他/]
|
||||
C ==>|1| D[ノートパソコン]
|
||||
C -->|2| E[iPhone]
|
||||
C -->|3| F[車]
|
||||
subgraph セクション
|
||||
C
|
||||
D
|
||||
E
|
||||
F
|
||||
G
|
||||
end
|
||||
{{< /mermaid >}}
|
||||
</div>
|
||||
|
||||
## 順序図
|
||||
|
||||
<div style="background-color:white; padding: 20px">
|
||||
{{< mermaid >}}
|
||||
sequenceDiagram
|
||||
autonumber
|
||||
par 行動 1
|
||||
アリス->>ジョン: こんにちはジョン、お元気ですか?
|
||||
and 行動 2
|
||||
アリス->>ボブ: こんにちはボブ、お元気ですか?
|
||||
end
|
||||
アリス->>+ジョン: こんにちはジョン、お元気ですか?
|
||||
アリス->>+ジョン: ジョン、聞こえていますか?
|
||||
ジョン-->>-アリス: こんにちはアリス、聞こえています!
|
||||
Note right of ジョン: ジョンは察しがよい
|
||||
ジョン-->>-アリス: とても気分がいいです!
|
||||
loop 毎分
|
||||
ジョン-->アリス: すばらしい!
|
||||
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>
|
||||
|
||||
102
themes/blowfish/exampleSite/content/samples/diagrams-flowcharts/index.md
Executable file
102
themes/blowfish/exampleSite/content/samples/diagrams-flowcharts/index.md
Executable file
|
|
@ -0,0 +1,102 @@
|
|||
---
|
||||
title: "Diagrams and Flowcharts"
|
||||
date: 2019-03-06
|
||||
description: "Guide to Mermaid usage in Blowfish"
|
||||
summary: "It's easy to add diagrams and flowcharts to articles using Mermaid."
|
||||
tags: ["mermaid", "sample", "diagram", "shortcodes"]
|
||||
type: 'sample'
|
||||
---
|
||||
|
||||
Mermaid diagrams are supported in Blowfish using the `mermaid` shortcode. Simply wrap the diagram markup within the shortcode. Blowfish automatically themes Mermaid diagrams to match the configured `colorScheme` parameter.
|
||||
|
||||
Refer to the [mermaid shortcode]({{< ref "docs/shortcodes#mermaid" >}}) docs for more details.
|
||||
|
||||
The examples below are a small selection taken from the [official Mermaid docs](https://mermaid-js.github.io/mermaid/). You can also [view the page source](https://raw.githubusercontent.com/nunocoracao/blowfish/main/exampleSite/content/samples/diagrams-flowcharts/index.md) on GitHub to see the markup.
|
||||
|
||||
## Flowchart
|
||||
|
||||
<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>
|
||||
|
||||
## Sequence diagram
|
||||
|
||||
<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>
|
||||
|
||||
## Class diagram
|
||||
|
||||
<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>
|
||||
|
||||
## Entity relationship diagram
|
||||
|
||||
<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>
|
||||
|
||||
102
themes/blowfish/exampleSite/content/samples/diagrams-flowcharts/index.zh-cn.md
Executable file
102
themes/blowfish/exampleSite/content/samples/diagrams-flowcharts/index.zh-cn.md
Executable file
|
|
@ -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>
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue