wireguard: use mermaid flowcharts instead of ascii art #385
Conversation
Updated the diagram to use a flowchart format for better visualization of the home network and WireGuard VPN setup.
Added a flowchart diagram to illustrate a simple home network setup for WireGuard VPN.
slyon
left a comment
slyon
left a comment
There was a problem hiding this comment.
note: Similar to my comment in #383 the diagram does not seem to render correctly in the staging environment of our documentation. I'm unclear if that's expected or a bug. @s-makin can clarify about that.
Rendered output in:
- https://canonical-ubuntu-documentation-library--385.com.readthedocs.build/server/how-to/wireguard-vpn/peer-to-site-on-router/
- https://canonical-ubuntu-documentation-library--385.com.readthedocs.build/server/how-to/wireguard-vpn/peer-to-site/
Besides that, the "Peer-to-Site on Router" diagram looks really nice and seems to be logically correct. It would be nice to have the "WireGuard VPN" entity in the middle (aligned with "public internet"), instead of both WireGuard interface arrows meeting at the very right of the diagram (i.e. "behind" the home network). Also, it's a bit inconsistent in that we sometimes have IP networks (i.e. "x.y.z.0/24") as description of the boxes and sometimes actual IP addresses (e.g. "10.10.10.1"). Similarly, the arrow-labels sometimes are just interface names (e.g. ppp0, wlan0) and sometimes they are interface name & IP (e.g. "wg0 10.10.11.x/24").
The "Peer-to-Site" diagram pretty much resembles the corresponding ASCII diagram and looks good to me!
|
Thank you very much @slyon. I will try to update as per your comments. However, can you help me with my problem regarding the overlapping in two of the diagrams. |
TheJJ
changed the title
s-makin
left a comment
s-makin
left a comment
There was a problem hiding this comment.
Hi @MariaBego56 and thank you for fixing up these diagrams for us!
They are not currently showing up in the preview, but I've added suggestions below for how to fix them. Once the suggestions are accepted and committed, the preview should rebuild and we should be able to see the diagrams as you intended!
| │pi4│ │NAS│ │...│ | ||
| │ │ │ │ │ │ | ||
| └───┘ └───┘ └───┘ | ||
| ```mermaid |
There was a problem hiding this comment.
| ```mermaid | |
| ```{mermaid} |
|
|
||
| In this diagram, we are depicting a home network with some devices and a router where we can install WireGuard. | ||
|
|
||
| ``` |
There was a problem hiding this comment.
| ``` | |
| ```{mermaid} |
There was a problem hiding this comment.
If you accept and commit this suggestion, it should fix the problem of the diagram not showing in the preview :)
3 participants
Description
Please provide a clear and concise description of your changes. Explain what this pull request accomplishes and *
why* it is needed.
Related Issue
If this pull request addresses an existing issue, please link to it below. Use the
Fixes #<issue-number>syntax toclose the issue automatically when the pull request is merged.
Example:
Contributor License Agreement (CLA)
By contributing to this project, you agree to the terms of
the Canonical Contributor License Agreement (CLA).
If you have not already signed the CLA, please do so here.
Commit Message for Squash Merge
We typically squash commits when merging. You can specify the commit message that should be used in this case if you wish.
Provide the desired commit message below:
[(optional) category] Brief description of changes made, and why
Checklist
Additional Notes (Optional)
Add any extra information or context that reviewers may need to know. This could include testing instructions,
screenshots, or links to related discussions.
Thank you for contributing to the Ubuntu Server documentation!