Web Design

Coding and AI


Chess & Scrabble





Web Design Icons Markdown Markdown Editor Mermaid Web Typography Fonts Variable Fonts Geolocation PDFs Mapping Chartist.js Flowcharts My Flowcharts HTML-only graphs



graph TD A[ Hard edge ] -->B( Round edge ) B --> | doesn't think | D( Result one ) B --> | decision time | C{ Thinks... } C --> | yes | E( Result two ) C --> | no | F( Result three with
a rather longer
bit of text ) C --> | start again | A C --> | out | D B --> | bypass | E B --> | short cut | G( End ) F --> | finally | G( End ) style C fill:Yellow
pie title What Voldemort doesn't have? "FRIENDS" : 2 "FAMILY" : 3 "NOSE" : 45

Mermaid provides a markdown-like syntax for diagrams. Diagrams are rendered as svg, therefore responsive (though text resizing not great). (Also integrated with the wonderful Typora).

Some caveats...
Needs a light background (#eee) to work because arrows can't be styled. Box colours can be styled individually. Sadly, themes in the current version (8.2.3) appear to be broken. Box text must always have leading and trailing spaces or some of it will be truncated with the default theme. Doesn't work in IE8-11 (sigh, what does?)

I might have a shot at this (this is a dark website!)

Be good to use mermaid's syntax within PHP, but rendering the flow-diagram to work in IE, be properly responsive, and respond to the page's own CSS. Here's a start...

  1. Parse the source to a 2d map of elements (boxes, lines, arrows, labels)
  2. Container is a stacked canvas and overlying div
  3. Create and use HTML for the boxes and labels (better than canvas for rendered text, padding, borders, rounded corners, drop-shadows, text-wrapping etc etc)
  4. Render the lines and arrows on the canvas
Round edge Diamond here Label Label Label