Add a Mermaid diagram to my site
Mermaid draws flowcharts, timelines, sequence diagrams and pie charts from a few lines of plain text. Your AI writes the text; the visitor’s browser draws the picture. Because it is text, your AI can change a step later as easily as a sentence.
The prompt
“Add a flowchart to the How it works page showing enquiry, quote, booking and delivery. Use Mermaid and match our colours. Show me before it goes live.”
Signed in, Get my prompt fills in your site for you. Otherwise press Copy and fill in the [bracketed] parts. First time? Connect your AI to bernard once: Use your own AI (opens in a new tab).
Ask your AI
Add a flowchart to the How it works page showing enquiry, quote, booking and delivery. Use Mermaid and match our colours. Show me before it goes live.
What bernard checks
Mermaid diagrams is on bernard’s permitted list. Someone read the maker’s own instructions (https://mermaid.js.org/config/usage.html) on 2026-09-14 and decided it was safe to run on a customer’s site: Floor 10.6.1, the version the doc-builder export used. IIFE build; no network calls of its own; renders client-side into inline SVG. securityLevel stays strict. Your site loads it from its published package, version 10.6.1 or newer, at a version bernard pins and only ever moves forward.
Your AI writes the exact tag bernard permits, on a private preview. You look at it and approve it before anything goes live.
People search for this as: flowchart, diagram, mermaid, process chart, timeline, org chart.
For the full list of libraries, what is waiting, and how to ask for one that is not there, see Embed a calendar, a diagram, a chart or another tool on my site.
Questions people ask
- Do I need to write any code to use Mermaid diagrams?
- No. Your AI writes the exact tag bernard permits and puts it on a preview. You approve it before it goes live, and pasted code is removed for safety every time.
- Is Mermaid diagrams safe on my site?
- bernard admits it only from its own published address, with its settings written as plain data rather than code, at a version bernard pins and only ever moves forward. Nothing else about it can be changed from a page.
- Can I change it later?
- Yes. Say what you want different and your AI redoes it on a preview for you to approve. Nothing about it is baked in.