Skip to content

Mermaid vs ML Visuals

Which should you use? A side-by-side look at what each one does, who it suits, what it costs, how hard it is to set up, and where each falls short.

Mermaid

Open source · MIT

Generate diagrams from Markdown-like text, for docs and code.

ML Visuals

Open source · MIT

A shared collection of reusable science figures and slide templates for machine learning writing.

The short answer

Choose Mermaid if you need…

  • Developers who want diagrams stored as text alongside their code and docs
  • Teams whose documentation is written in Markdown and needs diagrams
  • Non-programmers who want to make diagrams using the Live Editor
  • Projects that generate documentation as part of a build or production script

Choose ML Visuals if you need…

  • Machine learning students preparing presentations or thesis figures
  • Researchers who want clean, reusable diagrams for papers
  • Blog writers explaining ML concepts with visuals
  • Educators building teaching slides on neural network topics

Side-by-side

MermaidML Visuals
TypeDev toolOther
PriceFree and open sourceFree and open source
LicenceMITMIT
GitHub stars91k17.4k
Setup difficultyBeginnerBeginner
How you get itInstall with a package managerRead it online
Main languageTypeScript—
Last code update4 days ago4 years ago

What each one is

Mermaid

Mermaid is a JavaScript tool that turns short text descriptions into diagrams such as flowcharts and sequence diagrams. You write the diagram in a Markdown-inspired syntax and the renderer draws it, so the diagram can be edited as plain text. Its stated purpose is to keep documentation up to date with development.

ML Visuals

ML Visuals is a community-made set of over 100 figures and templates, kept as Google Slides, that people can copy, edit, and reuse in machine learning presentations, blog posts, and papers. Its goal is to make technical diagrams clearer and more professional. Contributors add figures, and anyone can download them in common formats.

Best for

Mermaid

  • Developers who want diagrams stored as text alongside their code and docs
  • Teams whose documentation is written in Markdown and needs diagrams
  • Non-programmers who want to make diagrams using the Live Editor
  • Projects that generate documentation as part of a build or production script

ML Visuals

  • Machine learning students preparing presentations or thesis figures
  • Researchers who want clean, reusable diagrams for papers
  • Blog writers explaining ML concepts with visuals
  • Educators building teaching slides on neural network topics

Strengths

Mermaid

  • Diagrams are plain text, so they are easy to edit, diff, and version-control
  • Works inside tools such as GitHub, according to the README
  • Large, active open-source project with a published documentation site

ML Visuals

  • Free to use, with no permission needed according to the README; credit to the author is requested
  • Figures are editable in Google Slides, so they can be customized
  • Community-contributed, with a list of planned topics such as transformers, LSTMs, and ResNet

Not ideal for

Mermaid

  • People who need pixel-precise, freeform illustration; the README describes it as text-defined diagrams rendered by a renderer
  • Users who need a visual drag-and-drop editor as their main workflow, since the README centers on text input via the Live Editor

ML Visuals

  • Anyone needing software or code, since the project is a set of slides rather than a program
  • People who need figures for non-ML topics, because the collection is focused on machine learning
  • Users who need a stable, versioned asset library, since the README mentions only Version 1.0 and the last push was in February 2023

Trade-offs

Mermaid

  • Layout and styling are controlled by the renderer, so fine visual control is limited by what the syntax supports
  • Requires learning the Mermaid syntax for each diagram type

ML Visuals

  • Relies on Google Slides, so editing requires Google access and requesting edit permission
  • The README says updates are coming but the last push date is February 2023, so the collection may not be current
  • Contributor attribution depends on notes in each slide, which is easy to miss

Getting started

Mermaid

Install the npm package

npm install mermaid
Step-by-step guide: how to use Mermaid

ML Visuals

Clone the repository

git clone https://github.com/dair-ai/ml-visuals
Step-by-step guide: how to use ML Visuals

Frequently asked questions

What is the difference between Mermaid and ML Visuals?

Mermaid: Generate diagrams from Markdown-like text, for docs and code. ML Visuals: A shared collection of reusable science figures and slide templates for machine learning writing. Mermaid suits developers who want diagrams stored as text alongside their code and docs, while ML Visuals suits machine learning students preparing presentations or thesis figures.

Are Mermaid and ML Visuals free?

Mermaid: Free and open source. ML Visuals: Free and open source.

Is Mermaid or ML Visuals more popular?

Mermaid has more GitHub stars (91k) than ML Visuals (17.4k). Popularity isn't the same as fit — check which one matches your use case above.

What are other alternatives to Mermaid and ML Visuals?

Other options people compare them with include Excalidraw.

Keep comparing

Built from our catalogue entries for both products: open-source details come from each project's README (AI-assisted, refreshed weekly) and GitHub data; AI-tool details are editorial. Spotted something wrong? Let us know from either product's page.