OdooWiki OCA HUB

Mermaid flowchart widget

web_widget_mermaid folder_open OCA/web open_in_new
Web License: AGPL-3

This module adds a basic widget for rendering text fields as flowcharts using mermaid.

auto_awesome What this module does

AI-generated from the code · Odoo 14.0

Adds a new field widget that turns text written in Mermaid markdown into a rendered flowchart or diagram inside Odoo forms. Developers can use it on any text field by setting widget="mermaid".

This module provides a new field widget called mermaid that can be applied to text fields in Odoo forms. When a field uses this widget, its text content is interpreted as Mermaid markdown and displayed as a rendered diagram (flowchart, sequence diagram, Gantt chart, etc.) instead of plain text.

  • The widget is read-only rendering: it takes the stored text value and draws the diagram on the form.
  • If the Mermaid syntax is invalid, an error message is shown next to the field instead of a broken diagram.
  • A default configuration is applied (theme, layout, fonts, date format) and can be overridden per field through the field's options.
  • The module includes a demo that adds a "Mermaid flowchart" page to the user form (res.users) with an example diagram, so you can see how it works.

The widget is registered in the web client's field registry and its assets (JavaScript and stylesheet) are loaded in the backend. It does not add any new menus or business logic; it is a presentation tool for developers who want to display diagrams from text fields.

Depends on

web

Text generated by AI (DeepSeek) from reading the Odoo 14.0 code on GitHub; it may contain mistakes, so check the code before deciding. View the code on GitHub

Availability by version

Reviewed: 2026-11-03
Confirmed (verified in repository and branch) Estimated (unverified) No information

Confirmation status: 2 confirmed, 7 with no information of 9 versions.

terminal Installation and usage

OCA documentation · Odoo 14.0

Usage

Source · Odoo 14.0

Put a widget="mermaid" attribute in relevant field tags in the view declaration:

<field name="flowchart" widget="mermaid"/>

Optionally, use an options attribute to pass a JSON object with mermaid configuration:

<field name="flowchart"
       widget="mermaid"
       options='{"theme": "forest", "gantt": {"fontSize": 14}}'/>

The syntax for creating diagrams is described in mermaid's documentation.

As an example, this text:

graph LR
    10.0 --> 11.0
    11.0 --> 12.0
    12.0 -.-> 13.0

Produces this flowchart:

Demonstration

In demo mode, the addon adds a flowchart field to users so you can try it. This shows up in Runbot instances.

Upgrading Mermaid

This information is only relevant for the development of this addon, not for users.

This addon uses a slightly tweaked build of Mermaid that works in older browsers. To reproduce it, take the following steps:

  • Clone https://github.com/knsv/mermaid/
  • Checkout the version you want to upgrade to (e.g. git checkout 8.4.0)
  • In webpack.config.base.js, in const jsRule = ..., remove the include key (so all dependencies are transpiled)
  • In babel.config.js, in targets, add some browsers besides node: 'current'. I arbitrarily went with this:
targets: {
  node: 'current',
  ie: '11',
  edge: '20',
  firefox: '35',
  chrome: '45',
  safari: '9',
}
  • Run yarn install
  • Run yarn build
  • The completed file is now in dist/mermaid.js. Try running grep 'let ' dist/mermaid.js to make sure everything was transpiled. The only output should be from comments.
  • Copy dist/mermaid.js to web_widget_mermaid/static/lib/mermaid/mermaid.js.
  • Bump the version number in __manifest__.py to match the Mermaid version.

No verified information in OCA: Installation, Configuration.

info

Data imported from GitHub: this sheet reflects the latest catalog review, not a live lookup. Always check the module documentation and staging before installing in production.