diff options
Diffstat (limited to 'themes/blowfish/exampleSite/content/samples/diagrams-flowcharts')
4 files changed, 408 insertions, 0 deletions
diff --git a/themes/blowfish/exampleSite/content/samples/diagrams-flowcharts/index.it.md b/themes/blowfish/exampleSite/content/samples/diagrams-flowcharts/index.it.md new file mode 100755 index 0000000..b8836b8 --- /dev/null +++ b/themes/blowfish/exampleSite/content/samples/diagrams-flowcharts/index.it.md @@ -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> + diff --git a/themes/blowfish/exampleSite/content/samples/diagrams-flowcharts/index.ja.md b/themes/blowfish/exampleSite/content/samples/diagrams-flowcharts/index.ja.md new file mode 100755 index 0000000..2b776cc --- /dev/null +++ b/themes/blowfish/exampleSite/content/samples/diagrams-flowcharts/index.ja.md @@ -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> + diff --git a/themes/blowfish/exampleSite/content/samples/diagrams-flowcharts/index.md b/themes/blowfish/exampleSite/content/samples/diagrams-flowcharts/index.md new file mode 100755 index 0000000..b8836b8 --- /dev/null +++ b/themes/blowfish/exampleSite/content/samples/diagrams-flowcharts/index.md @@ -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> + 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> + |