Перейти к основному содержимому
  1. Samples/

Diagrams and Flowcharts

2 минут· loading · loading · ·
mermaid sample diagram shortcodes
Rotten Mechanism
Автор
Rotten Mechanism
Как жеж вас сюда занесло?
Оглавление

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 docs for more details.

The examples below are a small selection taken from the official Mermaid docs. You can also view the page source on GitHub to see the markup.

Flowchart
#

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

Sequence diagram
#

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

Class diagram
#

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() }

Entity relationship diagram
#

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"

Related

Charts
1 минута· loading · loading
chart sample graph shortcodes
Emoji 🪂
1 минута· loading · loading
emoji sample