Mermaid Widget
Designing images with a few lines of MD-inspired text definitions is preferable as it’s easy and quick to use. You can use the ‘Mermaid widget’ to create the diagrams.
We'll cover the following
This widget is a JavaScript-based tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically. It supports a variety of UML and non-UML diagrams. For custom styling and more details, please refer to the official documentation.
This is what it looks like:
Press + to interact
You can edit the code to visualize your diagram however you see fit. Click the "Upload" button to save the final changes.
Examples
See the diagrams below.