Mermaid: New diagram type: network topology

[cristeab]

Is your feature request related to a problem? Please describe.
I need to create simple network topologies for testing frameworks involving multiple VMs and switches.

Describe the solution you'd like
Simple diagrams showing network connections between the VMs and switches, see this link for some samples: https://github.com/Azure/sonic-mgmt/blob/master/ansible/doc/README.testbed.Topology.md

Describe alternatives you've considered
Alternatives for this approach are editing by hand using any image editor that supports drawing rectangles and lines.

[azawawi]

@cristeab Do you have more ideas/examples for this one? I am willing to help out as I need this one as well.

[gildasio]

It would be so nice!!

@azawawi I think that something similar to flowchart as a notation like this:

graph TD;
    Router---Switch1;
    Router---Switch2;
    Switch1---Server;
    Switch2---Server;

Generate something like this:

This image above I created with LibreOffice and VRT extension.

[andrejpk]

It would be useful for cloud situations to allow including some network context (e.g. VNet/VPC). This could be done with indentation like how State diagrams show nexted states.

Also including IP addresses and other metadata is important for some situations. Markup/notes would also be important it some diagrams.

[andrejpk]

    network: vpc1
        node router
            type router
            meta ip=192.138.33.1
        node switch1
            type switch
            meta model=hp1234
        node switch2
            type switch
            meta model=cisco4321
            meta ip=192.168.33.2
        node server
            type server
           meta os=linux
        router---switch1
        router---switch2
        switch2---server: primary
        switch1---server: secondary

[cristeab]

@azawawi I am thinking at something more detailed, like showing how the physical ports of each switch / network device are connected:

networkDiagram
link:
startDevice: str-msn2700-01
startPort: Ethernet0
endDevice: str-7260-10
endPort: Ethernet1
bandwidth: 40000
vlanId: 1681
vlanMode: access
link:
startDevice: str-7260-11
startPort: Ethernet30
endDevice: str-7260-10
endPort: Ethernet64
bandwidth: 40000
vlanId: 1681-1712
vlanMode: trunk

This is very useful to represent graphically a testbed network topology when developing/testing software for switches: https://github.com/Azure/sonic-mgmt/blob/master/ansible/files/sonic_lab_links.csv

[andrejpk]

I think it would better to let the user add arbitrary name/value details instead of trying to think of and standardize every kind of metadata.

Maybe have two ways to define meta; a short line-liner or a list of name=value pairs:

    network: vpc1
        node router
            type router
            meta ip=192.138.33.1
        node switch1
            type switch
            meta model=hp1234
        node switch2
            type switch
            meta:
                model=cisco4321
                ip=192.168.33.2
        node server
            type server
            meta os=linux
        router---switch1
        router---switch2
        switch2---server: primary
        switch1---server: secondary

[jgreywolf]

Can someone provide another example of how something like this would look? I am not seeing how the examples shared in the first post are different than using flowchart, kind of like:...

Actually, forget that part. I tried to do this using flowcharts, both with and without a subgraph, and while it _sort of worked_, it did not look very nice

[jgreywolf]

Sorry - wrong button

[meshula]

In case it gives you ideas, I wrote this for my own use - https://github.com/meshula/Wires - it's got an extensive vocabulary and rule set for parsing graphs and attributes, documented in the readme. Here's some samples:

#define TEST1 "\
trivial ---> trivial2 \n\
foo ------->bar"

#define TEST2 "\
trivial ---+                  \n\
           |                  \n\
           )                  \n\
           +---->   trivial2"

#define TEST3 "          \n\
foo -------+             \n\
trivial1 --)-->trivial2  \n\
           +->     bar   "

#define TEST4 "\
sample0 ---------+                 \n\
sample1 -----+   |                 \n\
sample2 -----)---)----->output2    \n\
             +---)----->output1    \n\
                 |                 \n\
                 +--->output0     "

#define TEST5 "\
sample --+                                                                                           \n\
         +-> bassFilter ---> bassGain --------+                                                      \n\
         +-> midFilter ----> midGain ---------+                                                      \n\
         +-> trebleFilter ----> trebleGain ---+---> gain -+---> recorder ------+                     \n\
                                                          +---> monitor  ------+---> oscilloscope    \n\
                                                          +---> analyser                             \n\
                                                          +---> audiocontext                         "


#define TEST6 "\
[buffer:sample] ----------+                                                                                           \n\
  file:'human-voice.mp4'  |                                                                                             \n\
                          +-> [filter:bassFilter] ---> [gain:bassGain] --------+                                        \n\
                          |        type:'lowpass'          gain:2.0            |                                        \n\
                          |   frequency:160                                    |                                        \n\
                          |           q:1.2                                    |                                        \n\
                          +-> [filter:midFilter] ----> [gain:midGain] ---------+                                        \n\
                          |        type:'bandpass'          gain:4.0           |                                        \n\
                          |   frequency:500                                    |                                        \n\
                          |           q:1.2                                    |                                        \n\
                          +-> [filter:trebleFilter] ----> [gain:trebleGain] ---+---> gain -----+---> recorder           \n\
                                type:'highpass'            gain:3.0                  gain:1.0  +---> monitor            \n\
                           frequency:2000                                                      +---> oscilloscope       \n\
                                   q:1.2                                                       +---> analyser           \n\
                                                                                               +---> audiocontext         "

[mvandermade]

So you just want to put a picture/icon instead of a box ?

Tip:
You could also use fontawesome icons and shapes:

https://mermaid-js.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ3JhcGggVERcbiAgQiAtLT4gQ3tMZXQgbWUgdGhpbmt9XG4gIEMgLS0-fE9uZXwgRFtMYXB0b3BdXG4gIEMgLS0-fFR3b3wgRVtpUGhvbmVdXG4gIEMgLS0-fFRocmVlfCBGWyhmYTpmYS1kYXRhYmFzZSBEYXRhYmFzZSldXG5cdFx0IiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifSwidXBkYXRlRWRpdG9yIjpmYWxzZX0

[jgroom33]

806

[jgroom33]

@azawawi

There are a few libraries that do something similar. They seem to be standardizing on cloud provider icon sets.

This one seems to be the closest to the design goals of mermaid:
https://diagrams.mingrammer.com/docs/getting-started/examples

This one provides the greatest flexibility, but is more complex:
http://go.drawthe.net/

[azawawi]

Sample PlantUML nwdiag-based previous work with syntax:

https://plantuml.com/nwdiag

[luiscachog]

+1 on this idea.

[butterflyx]

Also +1 from me for this idea.

andrejpk nailed it for me with this kind of syntax:

    network: vpc1
        node router
            type router
            meta ip=192.138.33.1
        node switch1
            type switch
            meta model=hp1234
        node switch2
            type switch
            meta:
                model=cisco4321
                ip=192.168.33.2
        node server
            type server
            meta os=linux
        router---switch1
        router---switch2
        switch2---server: primary
        switch1---server: secondary

@mvandermade : yes, fontawesome might help, but it will never be the same beauty as in the example image gildasio provided

[ourweakness]

I commented on #1527 for the same issue - this is exclusively what I use mermaid for - making network documentation, but I have to leave out some connections and draw them by hand (still faster than vizio).

The amount of automated diagrams I could draw with this!