Skip to main content

Mermaid diagrams in yours Sphinx powered docs

Project description

This extension allows you to embed Mermaid graphs in your documents, including general flowcharts, sequence diagrams, gantt diagrams and more.

It adds a directive to embed mermaid markup. For example:

.. mermaid::

      participant Alice
      participant Bob
      Alice->John: Hello John, how are you?
      loop Healthcheck
          John->John: Fight against hypochondria
      Note right of John: Rational thoughts <br/>prevail...
      John-->Alice: Great!
      John->Bob: How about you?
      Bob-->John: Jolly good!

By default, the HTML builder will simply render this as a div tag with class="mermaid", injecting the external javascript, css and initialization code to make mermaid works.

For other builders (or if mermaid_output_format config variable is set differently), the extension will use mermaid-cli to render as to a PNG or SVG image, and then used in the proper code.

You can also embed external mermaid files, by giving the file name as an argument to the directive and no additional content:

.. mermaid:: path/to/mermaid-gantt-code.mmd

As for all file references in Sphinx, if the filename is not absolute, it is taken as relative to the source directory.

In addition, you can use mermaid to automatically generate a diagram to show the class inheritance using the directive autoclasstree. It accepts one or more fully qualified names to a class or a module. In the case of a module, all the class found will be included.

Of course, these objects need to be importable to make its diagram.

If an optional attribute :full: is given, it will show the complete hierarchy of each class.

The option :namespace: <value> limits to the base classes that belongs to this namespace. Meanwhile, the flag :strict: only process the classes that are strictly defined in the given module (ignoring classes imported from other modules).

For example:

.. autoclasstree:: sphinx.util.SphinxParallelError sphinx.util.ExtensionError

Or directly the module:

.. autoclasstree:: sphinx.util


You can install it using pip

pip install sphinxcontrib-mermaid

Then add sphinxcontrib.mermaid in extensions list of your project’s

extensions = [

Directive options

:alt:: determines the image’s alternate text for HTML output. If not given, the alternate text defaults to the mermaid code.

:align:: determines the image’s position. Valid options are 'left', 'center', 'right'

:caption:: can be used to give a caption to the diagram.

:zoom:: can be used to enable zooming the diagram. For a global config see mermaid_d3_zoom` bellow.

A preview after adding :zoom: option only to the first diagram example above:

Config values


The output format for Mermaid when building HTML files. This must be either 'raw' 'png' or 'svg'; the default is 'raw'. mermaid-cli is required if it’s not raw


The version of mermaid that will be used to parse raw output in HTML files. This should match a version available on The default is "10.2.0". If you need a newer version, you’ll need to add the custom initialization. See below.

If it’s set to "", the lib won’t be automatically included from the CDN service and you’ll need to add it as a local file in html_js_files. For instance, if you download the lib to _static/js/mermaid.js, in

html_js_files = [


Mermaid initilizaction code. Default to "mermaid.initialize({startOnLoad:true});".


The command name with which to invoke mermaid-cli program. The default is 'mmdc'; you may need to set this to a full path if it’s not in the executable search path.


When set to true, the shell=True argument will be passed the process execution command. This allows commands other than binary executables to be executed on Windows. The default is false.


For individual parameters, a list of parameters can be added. Refer to Examples:

mermaid_params = ['--theme', 'forest', '--width', '600', '--backgroundColor', 'transparent']

This will render the mermaid diagram with theme forest, 600px width and transparent background.


Allows overriding the sequence diagram configuration. It could be useful to increase the width between actors. It needs to be a json file Check options in the documentation


Use the verbose mode when call mermaid-cli, and show its output in the building process.


If using latex output, it might be useful to crop the pdf just to the needed space. For this, pdfcrop can be used. State binary name to use this extra function.


Enables zooming in all the generated Mermaid diagrams.

Markdown support

You can include Mermaid diagrams in your Markdown documents in Sphinx. You just need to setup the markdown support in Sphinx via myst-parser . See a minimal configuration from the tests

Then in your .md documents include a code block as in reStructuredTexts:


      participant Alice
      participant Bob
      Alice->John: Hello John, how are you?

Building PDFs on

In order to have Mermaid diagrams build properly in PDFs generated on, you will need a few extra configurations.

  1. In your .readthedocs.yaml file (which should be in the root of your repository) include a post-install command to install the Mermaid CLI:

      os: ubuntu-20.04
        python: "3.8"
        nodejs: "16"
          - npm install -g @mermaid-js/mermaid-cli

Note that if you previously did not have a .readthedocs.yaml file, you will also need to specify all targets you wish to build and other basic configuration options. A minimal example of a complete file is:

# .readthedocs.yaml
# Read the Docs configuration file
# See for details

# Required
version: 2

# Set the version of Python and other tools you might need
  os: ubuntu-20.04
    python: "3.8"
    nodejs: "16"
      - npm install -g @mermaid-js/mermaid-cli

# Build documentation in the docs/ directory with Sphinx
   configuration: docs/

# If using Sphinx, optionally build your docs in additional formats such as PDF
  - epub
  - pdf

   - requirements: docs/requirements.txt
  1. In your documentation directory add file puppeteer-config.json with contents:

      "args": ["--no-sandbox"]
  2. In your documentation file, add:

    mermaid_params = ['-p' 'puppeteer-config.json']


0.9.2 (May 28, 2023)

  • Implemented zoom on diagrams functionality. Contributed by Daniel Althviz Moré

  • Fix a bug on empty diagram generations. Contributed by Kevin Deldycke.

  • Upgrade default to Mermaid 10.2.0.

  • Implement automatic releases from Github Actions when a tag is pushed

See full set of changes.

0.8.1 (Feb 25, 2023)

  • Default to Mermaid 9.4.0 as 10.0 introduced incompatible changes. See the discussion.

0.8 (Feb 9, 2023)

  • Moved CI to Github Actions

  • Make the class diagram reproducible

  • Allow the user to change the JS priority

  • Drop support for Python 3.6

  • Black formatting

See full set of changes.

0.7.1 (July 17, 2021)

  • Update docs and tests for markdown support

0.7 (May 31, 2021)

  • Add compatibility with Sphinx 4.0

  • mermaid_init_js is now included in an standard way.

  • Documented how to use in Markdown documents

0.6.3 (February 21, 2021)

  • Make it compatible with recent Sphinx versions

  • Add basic (real) tests (So I stop breaking it!)

0.6.2 (February 18, 2021)

  • fix regression

  • setup travis

0.6.1 (February 8, 2021)

  • Fix a problem when called mermaid-cli

  • Fix typos on documentation

  • Improve internal code formatting (via black)

0.6.0 (January 31, 2021)

  • Drop support for Python version older than 3.6.

  • Allow to include javascript lib locally

  • Initialization code is now customizable

  • The default version included from the CDN is always the latest available.

0.5.0 (September 24, 2020)

  • Added mermaid_cmd_shell. Useful for Windows user.

  • Reimplement inheritance diagrams.

  • Fix UnicodeEncodeError on Python 2

0.4.0 (April 9, 2020)

  • Added mermaid_params

  • Added config file option

  • Improved latex integration

  • Added the pdfcrop functionality

  • Mermaid version is configurable

  • Several cleanups in the code

0.3.1 (Nov 22, 2017)

0.3 (Oct 4, 2017)

0.2.1 (Jun 4, 2017)

  • Workaround for opacity issue with rtd’s theme (thanks to Anton Koldaev)

0.2 (Jun 4, 2017)

  • Python 3 support fix (thanks to Shakeeb Alireza)

  • In-browser diagram generation

  • Autoclasstree directive. (Thanks to Zulko)

0.1.1 (Jun 4, 2017)

  • Better usage instructions

  • Bugfix

0.1 (Jul 18, 2016)

  • first public version

Project details

Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

sphinxcontrib-mermaid-0.9.2.tar.gz (17.9 kB view hashes)

Uploaded Source

Built Distribution

sphinxcontrib_mermaid-0.9.2-py3-none-any.whl (13.5 kB view hashes)

Uploaded Python 3

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page