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).
For the diagram types, the words to use and how to change one later, see Make a flowchart, timeline or process diagram on a page.
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
The Mermaid diagrams tool 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.9.8, raised from 10.6.1 for GHSA-6x64-9x62-f2gx (CSS injection into siblings of the diagram); GHSA-m4gq-x24j-jpmf, GHSA-xcj9-5m2h-648r, GHSA-ghcm-xqfw-q4vr, GHSA-6m6c-36f7-fhxh and GHSA-87f9-hvmw-gh4p are all fixed at or below it. Pinned below major 11 because the 11.x line is only patched at 11.16.1, and this row was vetted on the 10.x IIFE build. 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.9.8 or newer. Every week bernard checks which version each of your pages loads against the published list of known weaknesses, and moves a page forward when one is found.
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 the Mermaid diagrams tool?
- 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 the Mermaid diagrams tool safe on my site?
- bernard admits it only from its own published address, with its settings written as plain data rather than code. Every week bernard checks which version each of your pages loads against the published list of known weaknesses, and moves a page forward when one is found. 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.