Represent Flowcharts and Graphs with Mermaid

Flowchart is a common chart in slides that represents a workflow or process. While you can certainly add detailed text description in your alt text, you can augment your flowchart with a Mermaid representation.

Mermaid lets you create diagrams and visualizations using text and code. It is especially beneficial to augment flowcharts. BVI students will “compile” the Mermaid declarative grammar themselves. What we are doing here is transforming graph structure in a declarative format so that screenreaders can interact with them. Here is the URL to the Mermaid documentation and the URL to an online playground. Let’s look at an example:

This is a screenshot of a powerpoint slide which contains a flowchart with low color contrast (light blue, light yello, and light green)

We show an image from an original PowerPoint slide. First let’s change the color contrast:

This is a screenshot of a powerpoint slide which contains a flowchart with low color contrast (blue, black, and orange)

We will add the Mermaid diagram. You can also look at the image that Mermaid compiles A Mermaid-compiled flowchart.

This is a screenshot of the same flowchart in Mermaid