Mermaid

Documentation rot is the problem Mermaid was built against. Diagrams cost developer time and go out of date quickly, but going without them hurts productivity and organizational learning, so Mermaid makes the diagram cheap enough to keep current.

It is a JavaScript diagramming and charting tool that pairs Markdown-inspired text definitions with a renderer. Because a diagram is text, it diffs and reviews like code, can be generated inside production scripts, and renders directly in Markdown on GitHub. The Live Editor gives non-programmers a way to build one without touching a build step.

The feature set stays close to that idea.

• Over twenty diagram types: flowchart, sequence, class, state, entity relationship, Gantt, pie, git graph, mindmap, timeline and Sankey among them.
• Customization: themes, colors, fonts and layout directions.
• Sandboxed rendering: a security level renders inside a sandboxed iframe so scripts in user-submitted text cannot execute, at the cost of some interactivity.
• Small footprint: no heavy dependencies to carry into a page.
• Companion projects: a command line interface, the Live Editor and a rendering server.

Public sites that accept diagram text from users are the case the security work addresses, since standard sanitization breaks diagram syntax. Mermaid is MIT licensed, released frequently, and leans on d3 and dagre-d3 for graphical layout. It won a JS Open Source Award in 2019.