Mermaid syntax test

test_mermaid.md

title	author	editorType	tags	page_source
Mermaid Syntax Tests	Carp	github.com	mermaid syntax test	https://mermaid.js.org/intro/syntax-reference.html

Mermaid Syntax

My playground for experimenting with the Mermaid markup langauge and its rendering capabilities here on GitHub/GFM.

I have implemented these tests using the official [Mermaid Syntax Reference]¹.

• Cisco Network Topology Icons

usage

My immediate interest in learning the syntax is born out of necessity. I am in the process of restructuring my home network LAN by making use of features and hardware that I did not have back when I was setting up my network.

The three rules that I must adhere to:

a) I cannot modify the existing default gateway; b) I cannot make any changes that disturb internet access from the wireless clients that are routed to said gateway.

In response to these constraints, one must not only have a well thought out plan ahead of implementation but also be thourough in the testing of new feawtures in respect to the existing network. Mermaid syntax is perfect for this task!

My aim is simple -- I am producing a flow chart like so:

width="1438" height="1203"

• [Source: YouTube Channel]²

graphs - test1

graph TD;
    sw2.WAN0-->gw1.lan;
    sw2.LAN2-->ap3.home;
    sw2.LAN4-->xxx;

Loading

graph TD;
    ap3.WAN0-->sw2.WAN0
    ap3.LAN1-->tpsw1.MGMT-139

Loading

mermaid version check

 info

Loading

ER diagrams - test 2

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"

Loading

metadata for configuration - test 1

---
title: Frontmatter Example
displayMode: compact
config:
  theme: forest
gantt:
    useWidth: 400
    compact: true
---
gantt
    section Waffle
        Iron  : 1982, 3y
        House : 1986, 3y

Loading

Flow Charts

Directions

• TB - Top to bottom
• TD - Top-down/ same as top to bottom
• BT - Bottom to top
• RL - Right to left
• LR - Left to right

Top-Down v1

---
config:
  layout: elk
  look: classic
  theme: dark
---
flowchart TB
  A[Start] --> B{Decision}
  B -->|Yes| C[Continue]
  B -->|No| D[Stop]

Loading

Top-Down v2

---
config:
  flowchart:
    htmlLabels: false
---
flowchart TD
    markdown["`sw2`"]
    newLines["`WAN0
    LAN1
    LAN2
    LAN3
    LAN4-->MGMT`"]
    markdown --> newLines
    sw2.WAN0-->gw1.lan

Loading

Left-to-Right

---
config:
  flowchart:
    htmlLabels: false
---
flowchart LR
    markdown["`sw2`"]
    newLines["`WAN0
    LAN1
    LAN2
    LAN3
    LAN4-->MGMT`"]
    markdown --> newLines
    sw2.WAN0-->gw1.lan

Loading

Round Edge Node

flowchart LR
    id1(This is the text in the box)

Loading

Stadium Node

flowchart LR
    id1([This is the text in the box])

Loading

Sub-routine Node

flowchart LR
    id1[[This is the text in the box]]

Loading

Cylindrical Node

flowchart LR
    id1[(Database)]

Loading

Circle Node

flowchart LR
    id1((This is the text in the circle))

Loading

Asymetric Node

flowchart LR
    id1>This is the text in the box]

Loading

Double Circle Node

flowchart TD
    id1(((This is the text in the circle)))

Loading

Foot Notes && Reference Documents

Footnotes

1. https://mermaid.js.org/intro/syntax-reference.html ↩

2. https://youtube.com/@pragmaticsecurity ↩