Skip to content
All guides

Explain a project workflow with Mermaid diagrams

Example workspace in Knotpad. Illustrative project.
Mermaid flowchart showing the path from a brief to delivery and review

Example workspace in Knotpad.

A written plan can explain each task and still leave people unsure how the pieces fit. A diagram gives the next reader a quick way to see the process before reading the detail.

Knotpad renders Mermaid diagrams inside Markdown notes. Keep a workflow beside the brief, a sequence beside a handover, or a timeline beside a launch plan. The diagrams below use an illustrative customer portal project.

Start with the question

Choose a flowchart when the question is “What happens next?” Use a sequence diagram for “Who does what?” A Gantt chart helps explain a proposed schedule. Start with the smallest diagram that answers the question.

Add a Mermaid block to the note

Put the diagram definition in a fenced code block labelled mermaid. In the note preview, Knotpad renders it as a diagram. For example:

flowchart LR
  Brief[Agree the brief] --> Tasks[Plan the tasks]
  Tasks --> Work[Do the work]
  Work --> Review[Review the result]
  Review --> Record[Record the outcome]

Use short labels. Keep explanations and exceptions in the text below the diagram so the chart stays easy to scan.

Use a sequence for a handover

A handover has more than one participant. A sequence diagram can show the person setting the goal, the assistant reading the saved context, and the result being recorded for the next session. That gives a new reader the order of events without a long paragraph.

Keep the chart honest

A timeline is a plan you write. It is not automatically a live report of task dates or completion. Update its definition when the plan changes, and keep tracked tasks as the record of progress.

Complex charts are useful when their detail helps someone make a decision. Split an overcrowded diagram into smaller views instead of squeezing everything onto one screen.

Leave the explanation beside it

Write what the diagram describes, the assumptions behind it, and what still needs review. Link the brief, decisions and delivery log from the same note. A chart helps people understand the project; the surrounding notes explain why it works that way.

Learn how to record useful project documentation, or connect your assistant to work with the saved context.

Another view of the same project. Illustrative project.
Mermaid Gantt chart showing an illustrative launch schedule

Another view of the same project.

More guides

Give your next session a better starting point.

Use Knotpad in your browser on Mac or Windows, or start with the free Windows app. Add your brief, turn the plan into tasks, and connect your assistant when you’re ready.

Try Pro free for 14 days

Full Personal Pro access in your browser.
No card required.

How to connect your assistant