Salta al contenuto principale
  1. Campioni/

Diagrams and Flowcharts

2 minuti·
Mermaid Sample Diagram Shortcodes
Blowfish
Autore
Blowfish
Un potente, leggero tema per Hugo.
Indice dei contenuti

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
#

Section

Get money

One

Two

Three

Christmas

Go shopping

Let me think

Another

Laptop

iPhone

Car

Sequence diagram
#

BobJohnAliceBobJohnAlicepar[Action 1][Action 2]John is perceptiveloop[Every minute]Hello John, how are you?1Hello Bob, how are you?2Hello John, how are you?3John, can you hear me?4Hi Alice, I can hear you!5I feel great!6Great!7

Class diagram
#

1
Animal
+int age
+String gender
+isMammal()
+mate()
Duck
+String beakColor
+swim()
+quack()
Fish
-int sizeInFeet
-canEat()
Zebra
+bool is_wild
+run()

Entity relationship diagram
#

CUSTOMERDELIVERY-ADDRESSORDERINVOICEORDER-ITEMPRODUCT-CATEGORYPRODUCThasplacesliable forreceivescoversincludescontainsordered in

Related

Charts
1 minuto
Chart Sample Graph Shortcodes
Shortcodes
16 minuti
Shortcodes Mermaid Icon Lead Docs
Emoji 🪂
1 minuto
Emoji Sample
Buy Me A Coffee