Testing out mermaid.js support

Community feedback
,
1

Supposedly discourse supports mermaid.js rendering, which means you can make diagrams from simple text markup - so I am going to test it.

All the chat ai apps (like ChatGPT and Claude) know mermaid, so you can describe your system and they will try their best to draw it, and then you can quickly clean it up.

Just need to wrap in the three tildes mermaid at the start, and three tildes at the end to close

CleanShot 2024-08-07 at 20.09.55
CleanShot 2024-08-07 at 20.09.551430Ă—244 28.1 KB

graph TD;
      subgraph Shared_AC_Input
          AC_INPUT["Shared AC Input"] --> System1
          AC_INPUT --> System2
      end

      subgraph System1["System 1"]
          M1["Multiplus-II Inverter Charger 1"] 
          M2["Multiplus-II Inverter Charger 2"]
          C1["Cerbo GX"]
          MPPT_RS1["MPPT RS"]
          MPPT_RS2["MPPT RS"]
          MPPT_150_70["MPPT 150/70"]
 
          B1["PYLONTECH Battery Bank"]
          L1["Lynx DC Distributor"]
          EM1["AC Energy Meter"]

          AC_INPUT --> M1
          AC_INPUT --> M2
          MPPT_RS1 --> L1
          MPPT_RS2 --> L1
          MPPT_150_70 --> L1
          M1 --> L1
          M2 --> L1
          L1 --> B1
  
        
          C1 --> M1
          C1 --> M2
          C1 --> MPPT_RS1
          C1 --> MPPT_RS2
          C1 --> MPPT_150_70
          C1 --> EM1
          EM1 --> AC_INPUT
               end

      subgraph System2["System 2"]
          M3["Multi RS Inverter Charger"]
          B2["BYD Battery Bank"]
          C2["Cerbo GX"]
          Load["AC Loads"]

          AC_INPUT --> M3
          M3 --> Load
          M3 --> B2
          C2 --> M3
      end

Without the Tildas to make it render:

graph TD;
      subgraph Shared_AC_Input
          AC_INPUT["Shared AC Input"] --> System1
          AC_INPUT --> System2
      end

      subgraph System1["System 1"]
          M1["Multiplus-II Inverter Charger 1"] 
          M2["Multiplus-II Inverter Charger 2"]
          C1["Cerbo GX"]
          MPPT_RS1["MPPT RS"]
          MPPT_RS2["MPPT RS"]
          MPPT_150_70["MPPT 150/70"]
 
          B1["PYLONTECH Battery Bank"]
          L1["Lynx DC Distributor"]
          EM1["AC Energy Meter"]

          AC_INPUT --> M1
          AC_INPUT --> M2
          MPPT_RS1 --> L1
          MPPT_RS2 --> L1
          MPPT_150_70 --> L1
          M1 --> L1
          M2 --> L1
          L1 --> B1
  
        
          C1 --> M1
          C1 --> M2
          C1 --> MPPT_RS1
          C1 --> MPPT_RS2
          C1 --> MPPT_150_70
          C1 --> EM1
          EM1 --> AC_INPUT
               end

      subgraph System2["System 2"]
          M3["Multi RS Inverter Charger"]
          B2["BYD Battery Bank"]
          C2["Cerbo GX"]
          Load["AC Loads"]

          AC_INPUT --> M3
          M3 --> Load
          M3 --> B2
          C2 --> M3
      end
3

Yeah, we are using mermaid in a lot of #webdev discussions and documentation processes. Good piece of software and became sort of industrial standard

1 Like
4

First time using it … seems cool… thanks

https://community.victronenergy.com/t/3-50-13-gui-v2-grid-energy-shown-as-ac-consumption-in-ac-to-dc-only-system/508/3?u=peter

Little bug… in Safari on Mac

preview looks fine:

image
image3118Ă—336 63.9 KB

final render has the top cut off, cannot scroll to see what’s there

image
image2042Ă—352 41.9 KB

5

The safari rendering is weird for some reason.

Works perfectly in chrome.

6

Testing Mermaid JS for the first time based on information from @guystewart … looks pretty cool.

Chart

flowchart TD
    A[Cerbo-S GX] 
    B[PylonTech Battery]
    C[SmartSolar Charger MPPT 75-10]
    D[Phoenix Smart IP43 Charger 12-30]
    E[Energy Meter ET112]
    F[SmartShunt 500A]
    G[Orion-Tr 12/24-5A]
    H[Crappy Grid]
    I[Solar Panels]
    J[Non-Essential AC Loads]
    K[Essential DC Loads]
    
    A <-->|BMS.Can| B
    A <-->|VE.Direct| C
    A <-->|VE.Direct| D
    A <-->|Victron Serial to USB| E
    A <-->|VE.Direct| F 
    
    subgraph DC side
        I --> C
        C --> B
        B --> F
        F --> G
        G --> K
    end
    
    subgraph AC side
        H --> E
        E --> D
        E --> J
    end

    D -->|DC Power| B
1 Like
7

Test if it is working for me?
Needs to have three tilde ´ followed by the keyword “mermaid” to trigger discourse rendering.
Special character symbol “fa:fa-car” does not show up using Firefox

graph TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[Laptop]
    C -->|Two| E[Cerbo]
    C -->|Three| F[fa:fa-car  Multiplus for Car]

Using three ` without keyword mermaid, there is code recognition without rendering

graph TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[Laptop]
    C -->|Two| E[Cerbo]
    C -->|Three| F[fa:fa-car Multiplus for Car]

Without ` there is no code recognition

graph TD
A[Christmas] -->|Get money| B(Go shopping)
B → C{Let me think}
C -->|One| D[Laptop]
C -->|Two| E[Cerbo]
C -->|Three| F[fa:fa-car Multiplus for Car]