Initial commit for Hugo site.

2025-02-20 08:28:31 -05:00
parent 737c448252
commit 045d0c24f3
696 changed files with 91218 additions and 0 deletions
@@ -0,0 +1,92 @@
+---
+title: "Diagramme und Flussdiagramme"
+date: 2019-03-06
+description: "Leitfaden zur Verwendung von Mermaid in Congo"
+summary: "Mit Mermaid ist es einfach, Diagramme und Flussdiagramme zu Artikeln hinzuzufügen."
+tags: ["Mermaid", "Beispiele", "Diagramm", "Shortcodes"]
+---
+
+Mermaid-Diagramme werden in Congo mit dem Shortcode `mermaid` unterstützt. Füge einfach das Diagramm-Markup in den Shortcode ein. Congo gestaltet Mermaid-Diagramme automatisch so, dass sie der Konfiguration des Parameters `colorScheme` entsprechen.
+
+Weitere Details findest du in der [Mermaid-Shortcode-Dokumentation]({{< ref path="docs/shortcodes#mermaid" lang="en">}}).
+
+Die folgenden Beispiele sind eine kleine Auswahl aus der [offiziellen Mermaid-Dokumentation](https://mermaid-js.github.io/mermaid/). Du kannst auch [die Quelle der Seite](https://raw.githubusercontent.com/jpanther/congo/dev/exampleSite/content/samples/diagrams-flowcharts/index.de.md) auf GitHub aufrufen, um das Markup zu sehen.
+
+## Flussdiagramm
+
+{{< mermaid >}}
+graph TD
+A[Weihnachten] -->|Erhalte Geld| B(Geh einkaufen)
+B --> C{Lass mich nachdenken}
+B --> G[/Sonstiges/]
+C ==>|Eins| D[Laptop]
+C -->|Zwei| E[iPhone]
+C -->|Drei| F[Auto]
+subgraph Section
+C
+D
+E
+F
+G
+end
+{{< /mermaid >}}
+
+## Sequenzdiagramm
+
+{{< mermaid >}}
+sequenceDiagram
+autonumber
+par Action 1
+Alice->>John: Hallo John, wie geht es dir?
+and Action 2
+Alice->>Bob: Hallo Bob, wie geht es dir?
+end
+Alice->>+John: Hallo John, wie geht es dir?
+Alice->>+John: John, kannst du mich hören?
+John-->>-Alice: Hi Alice, ich kann dich hören!
+Note right of John: John ist aufmerksam
+John-->>-Alice: Mir geht es gut!
+loop Jede Minute
+John-->Alice: Super!
+end
+{{< /mermaid >}}
+
+## Klassendiagramm
+
+{{< mermaid >}}
+classDiagram
+Tier "1" <|-- Ente
+Tier <|-- Fisch
+Tier <--o Zebra
+Tier : +int alter
+Tier : +String geschlecht
+Tier: +istSaeugetier()
+Tier: +paaren()
+class Ente{
+String schnabelFarbe
+schwimmen()
+quaken()
+}
+class Fisch{
+-int groesseInFuss
+-canFressen()
+}
+class Zebra{
+bool ist_wild
+rennen()
+}
+{{< /mermaid >}}
+
+## Entitäts-Beziehungs-Diagramm
+
+{{< mermaid >}}
+erDiagram
+KUNDE }|..|{ LIEFER-ADRESSE : hat
+KUNDE ||--o{ BESTELLUNG : platziert
+KUNDE ||--o{ RECHNUNG : "zustaendig fuer"
+LIEFER-ADRESSE ||--o{ BESTELLUNG : erhaelt
+RECHNUNG ||--|{ BESTELLUNG : "deckt ab"
+BESTELLUNG ||--|{ BESTELLTES-PRODUKT : enthaelt
+PRODUKT-KATEGORIE ||--|{ PRODUKT : enthaelt
+PRODUKT ||--o{ BESTELLTES-PRODUKT : "bestellt in"
+{{< /mermaid >}}
@@ -0,0 +1,92 @@
+---
+title: "Diagramas y diagramas de flujo"
+date: 2019-03-06
+description: "Guía para el uso de Mermaid en Congo"
+summary: "Es fácil agregar diagramas y diagramas de flujo a los artículos usando Mermaid."
+tags: ["mermaid", "sample", "diagram", "shortcodes"]
+---
+
+Los diagramas Mermaid son compatibles con Congo utilizando el shortcode `mermaid`. Simplemente encierra las etiquetas del diagrama dentro del shortcode. Congo crea temas automáticamente a los diagramas Mermaid para que coincidan con el parámetro `colorScheme` configurado.
+
+Consulta la documentación del [shortcode Mermaid]({{< ref path="docs/shortcodes#mermaid" lang="en" >}}) para obtener más detalles.
+
+Los ejemplos a continuación son una pequeña selección tomada de la [documentación oficial de Mermaid](https://mermaid-js.github.io/mermaid/). También puedes ver el [código fuente de la página](https://raw.githubusercontent.com/jpanther/congo/dev/exampleSite/content/samples/diagrams-flowcharts/index.es.md) en GitHub para ver la sintaxis.
+
+## Diagrama de flujo
+
+{{< 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 >}}
+
+## Diagrama de secuencia
+
+{{< 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 >}}
+
+## Diagrama de clase
+
+{{< 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 >}}
+
+## Diagrama entidad-relación
+
+{{< 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 >}}
@@ -0,0 +1,92 @@
+---
+title: "ダイアグラムとフローチャート"
+date: 2019-03-06
+description: "CongoでMermaidを使うためのガイド"
+summary: "It's easy to add diagrams and flowcharts to articles using Mermaid."
+tags: ["mermaid", "sample", "diagram", "shortcodes"]
+---
+
+Mermaid構文を `mermaid` で囲むだけで、Congoは設定された `colorScheme` に合わせて図を出力します。
+
+詳細は[ショートコード - Mermaid]({{< ref "docs/shortcodes#mermaid" >}})を参照してください。
+
+以下の例は、[Mermaid公式ドキュメント](https://mermaid-js.github.io/mermaid/)から抜粋したものです。GitHubの[ページのソースを見る](https://raw.githubusercontent.com/jpanther/congo/dev/exampleSite/content/samples/diagrams-flowcharts.md)からもマークアップを見ることができます。
+
+## フローチャート
+
+{{< 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 >}}
+
+## シーケンス図
+
+{{< 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 >}}
+
+## クラス図
+
+{{< 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 >}}
+
+## ER図
+
+{{< 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 >}}
@@ -0,0 +1,92 @@
+---
+title: "Diagrams and Flowcharts"
+date: 2019-03-06
+description: "Guide to Mermaid usage in Congo"
+summary: "It's easy to add diagrams and flowcharts to articles using Mermaid."
+tags: ["mermaid", "sample", "diagram", "shortcodes"]
+---
+
+Mermaid diagrams are supported in Congo using the `mermaid` shortcode. Simply wrap the diagram markup within the shortcode. Congo 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/jpanther/congo/dev/exampleSite/content/samples/diagrams-flowcharts/index.md) on GitHub to see the markup.
+
+## Flowchart
+
+{{< 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 >}}
+
+## Sequence diagram
+
+{{< 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 >}}
+
+## Class diagram
+
+{{< 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 >}}
+
+## Entity relationship diagram
+
+{{< 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 >}}
@@ -0,0 +1,92 @@
+---
+title: "图表和流程图"
+date: 2019-03-06
+description: "Congo中Mermaid使用教程"
+summary: "使用Mermaid来绘制图表和流程图是非常简单的"
+tags: ["mermaid", "sample", "diagram", "shortcodes"]
+---
+
+Congo 支持使用 `mermaid` 短代码插入 Mermaid 图表。只需将图表标记包裹在短代码内。Congo 会自动根据配置的 `colorScheme` 参数为 Mermaid 图表添加主题。
+
+有关更多详细信息，请参阅 [mermaid 短代码]({{< ref "docs/shortcodes#mermaid" >}}) 文档。
+
+以下示例是从 [官方 Mermaid 文档](https://mermaid-js.github.io/mermaid/) 中摘取的一小部分。您还可以在 GitHub 上 [查看页面源代码](https://raw.githubusercontent.com/jpanther/congo/dev/exampleSite/content/samples/diagrams-flowcharts/index.md) 以查看标记。
+
+## 流程图
+
+{{< 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 >}}
+
+## 时序图
+
+{{< 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 >}}
+
+## 类图
+
+{{< 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 >}}
+
+## ER图
+
+{{< 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 >}}