-
-
Notifications
You must be signed in to change notification settings - Fork 6.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
New diagram type: network topology #1227
Comments
@cristeab Do you have more ideas/examples for this one? I am willing to help out as I need this one as well. |
It would be so nice!! @azawawi I think that something similar to flowchart as a notation like this:
Generate something like this: This image above I created with LibreOffice and VRT extension. |
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. |
|
@azawawi I am thinking at something more detailed, like showing how the physical ports of each switch / network device are connected: networkDiagram 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 |
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:
|
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 |
Sorry - wrong button |
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:
|
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: This one provides the greatest flexibility, but is more complex: |
Sample PlantUML nwdiag-based previous work with syntax: |
+1 on this idea. |
Also +1 from me for this idea. andrejpk nailed it for me with this kind of syntax:
@mvandermade : yes, fontawesome might help, but it will never be the same beauty as in the example image gildasio provided |
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! |
What would be the best way to create network-diagrams while we wait for this? Something that also contains meta-info like ip-addresses and ip/port info.. |
@xeor I've settled on using drawio. There's a plug-in for vscode. The files can be saved as foo.drawio.svg or foo.drawio.png and rendered in markdown. |
really need this for drawing a multi-interface server -> example, on a back-channel and front-channel. |
Hello, Hopefully it meets your needs until MermaidJS is able to make network diagrams too. |
I would just add to the syntax discussion that it would ideally be possible to label an IP address per connection line in nodes that have multiple interfaces (routers etc). I think there are basically two ways per-interface IP address can be added visually:
A random example from the internet of the first approach, in the central node: |
related: #1652 "Labels on edge connections" |
I want to support @justyn regarding the need to define ip addresses to interfaces rather than devices. |
I'm interested also |
Could you please refrain from putting comments on interest and please react to already existing comments @giosueDelgado, you're notifying everyone about something, that doesn't make this issue move in any way forward. Btw, I'm interested to work on this if possible, any new progress @kriskeillor ? Was any of the work you discussed done ? Or is being still worked on ? If so where, is there any PRs? Draft PRs ? Forks ? |
I would also be interested on working on this, network diagrams are my main use-case for mermaid and i'd love to help implement this feature |
@AkechiShiro I developed the network diagram simultaneously in Mermaid and EPlan. Afaik the EPlan diagram was utilized, but I am no longer on the project. To be honest, I don't think Mermaid was a good choice for developing the network diagram. I was more or less reinventing the wheel and when I presented the effort, it was actually laughed at. Fortunately the EPlan diagram was better received. There are lots of problems with using Mermaid as a network diagramming tool:
If you use markdown/mermaid for your typical word processing, throwing some small conceptual network diagrams in with Mermaid is easy and convenient - but to actually develop full-scale networks and define connections, addresses, technical specs, etc. I don't think mermaid (or any markdown tool) packs enough punch. |
Thanks for your detailed answer @kriskeillor, however EPlan is a proprietary software and is not freely available right ? |
Correct @AkechiShiro, it is paid software (and expensive to boot). It's also geared towards electrical diagrams (building systems, automation, process engineering, etc.) not specifically intended for IT infrastructure - although it can be massaged to fit. Perhaps NetJSON would better fit your needs? |
https://kubernetes.io/docs/contribute/style/diagram-guide/ Parsed and supported natively within Mermaid as-is (using it within Obsidian myself). Would be worth looking up common representations and annotations for (just spitballing here): a DEVICE, which has zero or more INTERFACES |
Minor update: ended up going with Terraform-moderated k8s which (though this wasn't the deciding factor) made automated graphing from static IAC trivial: https://github.com/pcasteran/terraform-graph-beautifier |
Just skimmed this after trying to visualise my own network topology pre-overhaul in Mermaid. Actually I'm transitioning from Nevertheless I think @azawawi 's pointer appears to be very on-point as an example what would be needed:
And in fact @andrejpk 's suggestion would conceptually come very close to that from a DX POV. If on top of that we would be inspired by
As we can see in @bktycrg 's kubernetes and in @rgonzalez028 's examples, Mermaid already supports (most of???) the necessary primitives, so with extensive use of What I would additionally need for my current topic, is the easy addition of another "layer" within a "host-like" primitive, which is services and/or containers. I haven't seen this in |
I am confused, as some items here have been closed as done? Is there a way to do a network topology mermaid diagram now, or not? If, yes, where do find the required info on how to make one? |
No. Check out d2lang. You can do some with that as long as you don’t go
overboard
…On Fri, May 3, 2024 at 03:10 TheBigBear ***@***.***> wrote:
I am confused, as some items here have been closed as done? Is there a way
to do a network topology mermaid diagram now, or not? If, yes, where do
find the required info on how to make one?
—
Reply to this email directly, view it on GitHub
<#1227 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/ABQR2PN7BNMSTUFE3DLSXYDZANO7RAVCNFSM4KMSX22KU5DIOJSWCZC7NNSXTN2JONZXKZKDN5WW2ZLOOQ5TEMBZGI3TAMZRG4ZQ>
.
You are receiving this because you are subscribed to this thread.Message
ID: ***@***.***>
|
bump |
As Mermaid is natively supported by Github this would be a really nice feature |
+1 from my side, would really appreciate this too. |
just wanted to say even today I was looking to make a network diagram, and would appreciate being able to do it in mermaid |
I have to admit, without wanting anyone to quit mermaid - it has it's pro arguments, i like d2lang :) |
@snooops when you explain to me how to create (pretty) network diagrams, I'm with you. 😊 |
@lxwulf Currently i switched from mermaid and even quit d2lang and trying this: https://playground.likec4.dev/w/tutorial/ |
+1 |
Just a reminder, every time you +1 comment you ping everyone who has ever commented or subscribed. Be polite, thumbs up and use the subscribe button. That's what its there for. |
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.
The text was updated successfully, but these errors were encountered: