Skip to main content

Render mermaid markdown flowcharts

Project description

Beta License: AGPL-3 OCA/web Translate me on Weblate Try me on Runboat

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

Table of contents

Usage

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:

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.

Bug Tracker

Bugs are tracked on GitHub Issues. In case of trouble, please check there if your issue has already been reported. If you spotted it first, help us to smash it by providing a detailed and welcomed feedback.

Do not contact contributors directly about support or help with technical issues.

Credits

Authors

  • Therp BV

Contributors

Maintainers

This module is maintained by the OCA.

Odoo Community Association

OCA, or the Odoo Community Association, is a nonprofit organization whose mission is to support the collaborative development of Odoo features and promote its widespread use.

This module is part of the OCA/web project on GitHub.

You are welcome to contribute. To learn how please visit https://odoo-community.org/page/Contribute.

Project details


Download files

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

Source Distributions

No source distribution files available for this release.See tutorial on generating distribution archives.

Built Distribution

File details

Details for the file odoo10_addon_web_widget_mermaid-10.0.8.4.0.99.dev2-py2-none-any.whl.

File metadata

File hashes

Hashes for odoo10_addon_web_widget_mermaid-10.0.8.4.0.99.dev2-py2-none-any.whl
Algorithm Hash digest
SHA256 8d539283cdfcafc09cf010258c819ca818eb79ff7d54b846c3791e19082fe029
MD5 842168aa2ac8b961addbceb99be6faf2
BLAKE2b-256 362beb859d654fef8f2758adbc157d740a06dd11720e681475934fd27e76ff4b

See more details on using hashes here.

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