How to use the Mermaid Diagram Generator.
A Mermaid diagram should encode relationships clearly and use syntax supported by the target renderer. Validate it in that renderer and keep labels faithful to the supplied process.
Make the workflow fit your task.
List the process steps, decisions and relationships before choosing a diagram type. Use concise labels and syntax supported by the destination's Mermaid version. Render the result and check both parse success and whether the arrows express the intended logic.
- What you provide
- Process, relationships or system description.
- What you get
- Mermaid source matching the described structure.
See the input and the result.
Illustrative input and output · a teaching example, not a live WebAct run
Example input
Process: receive a request, review it, then either approve or ask for revision.
Completed example
flowchart TD
A[Receive request] --> B{Meets requirements?}
B -- Yes --> C[Approve]
B -- No --> D[Request revision]
Validate this syntax in the target Mermaid renderer before sharing.Load this input into the prompt, then copy it to WebAct to try the task. Your result may differ from the illustration.
Decisions and troubleshooting.
Should an arrow be added just to make the diagram look connected?
Only when the relationship exists in the supplied process. Missing relationships should remain questions, not invented flow.
Why does valid-looking Mermaid fail in the target editor?
Renderer versions or supported features may differ. Test in that environment and simplify unsupported syntax.
Reference for this workflow.
Try it with your own source.
Replace the example with your material in the task prompt. Keep the requirements you need, then copy the task into WebAct.
Customize and copy the task ↑