Make a flowchart, timeline or process diagram on a page

On a bernard site a diagram is a few lines of plain text that the visitor’s browser turns into a picture. The tool that does the drawing is called Mermaid, and it is on bernard’s checked list, so your AI can add it to any page. Because the diagram is text, changing it later is as easy as changing a sentence.

Ask for one

Say what the diagram is about and list the steps in order. Your AI writes the diagram text, adds the drawing tool to the page if it is not there yet, and shows you a preview. You approve it before it goes live.

Add a flowchart to the “How it works” page: enquiry, then a call, then a quote, then a deposit, then the making, then delivery. Use our colours.

On the About page, add a timeline of the studio: 2014 founded, 2017 moved to the mill, 2021 first apprentice, 2024 the new kiln.

Under the “What happens when you order” heading, add a sequence diagram: the customer places the order, the shop confirms, the workshop makes it, the courier delivers, the customer receives a follow-up email.

The kinds you can have

You want	Ask for	Good for
Boxes and arrows	a flowchart	how a service works, a decision tree, an org chart
Who says what to whom, in order	a sequence diagram	what happens after an enquiry or an order
Dates down a line	a timeline	your history, a course schedule, a project
One idea in the middle, branches around it	a mind map	what a course covers, what a service includes
Shares of a whole	a pie chart	where your time goes, what a fee covers
Tasks against weeks	a project chart	a build, a renovation, a launch plan

A flowchart can run top to bottom or left to right. Say which if it matters: “left to right” suits a short process on a wide page.

What it looks like underneath

You never have to write this, but it helps to know what your AI is editing. A flowchart is a list of steps and the arrows between them:

graph TD
  A[Enquiry] --> B[Call]
  B --> C[Quote]
  C --> D{Deposit paid?}
  D -- yes --> E[Making]
  D -- no --> C
  E --> F[Delivery]

The words in brackets are the box labels. The arrows are the lines. A step in curly brackets is a decision. Change a label and the picture changes. That is the whole trick, and it is why “add a firing step between making and delivery” is a five-second edit rather than a redraw.

Colours and style

Diagrams take a small set of colours: the box fill, the box border, the text and the lines. Ask your AI to match the site:

Make the diagram match the site: our teal for the boxes, the grey from the footer for the lines, and the same font as the headings.

There are also four built-in looks (a light neutral, a dark one, a green one and the default), and a spacing setting for wide or cramped charts. The soft grey look bernard suggests for documentation pages reads well on a white page and is the one your AI reaches for first.

One page, one set of settings: every diagram on that page shares them. If you want two very different diagrams, put them on different pages, or accept that they match.

Change it later

Talk about the diagram the way you would talk about a paragraph:

Add a step between quote and deposit: “site visit”.

Rename “Making” to “In the workshop” and make the last box green.

Turn the timeline into a flowchart.

Every change lands on a preview first. Approve it and it is live; do not, and nothing moves.

What does not work, on purpose

• Links inside the diagram. A box cannot be clickable. The setting that allows it is switched off on bernard sites, because a link inside a diagram could point anywhere and bernard could not check it. Put the link in the text beside the diagram.
• HTML inside labels. Labels are plain words. Bold, italics and images inside a box are not available; keep the label short and put the detail in the page.
• Pasted code. If someone hands you a diagram with its own script, paste the diagram text only. Any script is removed for safety, every time, and your AI adds the checked drawing tool instead.

When it goes wrong

• Shows as plain text. The diagram text is on the page but the drawing tool is not. Pages brought in from another documentation tool often arrive this way. Ask your AI to add Mermaid to the page.
• A red “syntax error” box. One line of the text is malformed. An ampersand, a quote mark or a bracket inside a label is the usual cause. Tell your AI which page; it repairs the text.
• Too small to read on a phone. A wide left-to-right chart shrinks to fit. Ask for top-to-bottom instead, or split it into two diagrams.
• Every diagram on the page changed colour. The settings are per page, not per diagram. That is expected; ask for a look that suits all of them.

Mermaid is one of the checked tools; the list, what is waiting and how to ask for a tool that is not there are in Embed a calendar, a diagram, a chart or another tool on my site. The short page for this tool is Add a Mermaid diagram to my site.