Mermaid draws diagrams from text. You write a few lines describing boxes and arrows, and a renderer turns them into a picture. It is ideal for documentation and notes because the diagram lives next to the words and is easy to change. Pick a starter, copy it, and replace the labels.
Paste a snippet into a Mermaid live preview to see it render as you edit. To send the diagram to someone who does not use Mermaid, share it as a rendered page rather than a screenshot, so you can still fix it later; the steps are in how to share a Mermaid diagram as a link. Mermaid also works inside Markdown documents in a ```mermaid block, so a whole note with diagrams can be published at once with Markdown hosting on dochost.