Search 1.9 billion lines of Odoo code on GitHub
web_widget_mermaid
<h1 class="title">Mermaid flowchart widget</h1>
<p><a class="reference external" href="https://odoo-community.org/page/development-status"><img alt="Beta" src="https://img.shields.io/badge/maturity-Beta-yellow.png" /></a> <a class="reference external" href="http://www.gnu.org/licenses/agpl-3.0-standalone.html"><img alt="License: AGPL-3" src="https://img.shields.io/badge/licence-AGPL--3-blue.png" /></a> <a class="reference external" href="https://github.com/OCA/web/tree/12.0/web_widget_mermaid"><img alt="OCA/web" src="https://img.shields.io/badge/github-OCA%2Fweb-lightgray.png?logo=github" /></a> <a class="reference external" href="https://translation.odoo-community.org/projects/web-12-0/web-12-0-web_widget_mermaid"><img alt="Translate me on Weblate" src="https://img.shields.io/badge/weblate-Translate%20me-F47D42.png" /></a> <a class="reference external" href="https://runbot.odoo-community.org/runbot/162/12.0"><img alt="Try me on Runbot" src="https://img.shields.io/badge/runbot-Try%20me-875A7B.png" /></a></p>
<p>This module adds a basic widget for rendering text fields as flowcharts using
<a class="reference external" href="https://mermaidjs.github.io">mermaid</a>.</p>
<p><strong>Table of contents</strong></p>
<div class="contents local topic" id="contents">
<ul class="simple">
<li><a class="reference internal" href="#usage" id="id1">Usage</a></li>
<li><a class="reference internal" href="#demonstration" id="id2">Demonstration</a></li>
<li><a class="reference internal" href="#upgrading-mermaid" id="id3">Upgrading Mermaid</a></li>
<li><a class="reference internal" href="#bug-tracker" id="id4">Bug Tracker</a></li>
<li><a class="reference internal" href="#credits" id="id5">Credits</a><ul>
<li><a class="reference internal" href="#authors" id="id6">Authors</a></li>
<li><a class="reference internal" href="#contributors" id="id7">Contributors</a></li>
<li><a class="reference internal" href="#maintainers" id="id8">Maintainers</a></li>
</ul>
</li>
</ul>
</div>
<a name="usage"></a>
<h2><a class="toc-backref" href="#id1">Usage</a></h2>
<p>Put a <code>widget="mermaid"</code> attribute in relevant field tags in the view
declaration:</p>
<pre>
<code><field name="flowchart" widget="mermaid"/></code>
</pre>
<p>Optionally, use an <code>options</code> attribute to pass a JSON object with
<a class="reference external" href="https://mermaidjs.github.io/#/mermaidAPI?id=configuration">mermaid configuration</a>:</p>
<pre>
<code><field name="flowchart"
widget="mermaid"
options='{"theme": "forest", "gantt": {"fontSize": 14}}'/></code>
</pre>
<p>The syntax for creating diagrams is described in
<a class="reference external" href="https://mermaidjs.github.io/#/flowchart">mermaid's documentation</a>.</p>
<p>As an example, this text:</p>
<pre>
<code>graph LR
10.0 --> 11.0
11.0 --> 12.0
12.0 -.-> 13.0</code>
</pre>
<p>Produces this flowchart:</p>
<img alt="Flowchart" src="https://raw.githubusercontent.com/OCA/web/12.0/web_widget_mermaid/static/description/flowchart_example.png" />
<a name="demonstration"></a>
<h2><a class="toc-backref" href="#id2">Demonstration</a></h2>
<p>In demo mode, the addon adds a flowchart field to users so you can try it. This shows up in Runbot instances.</p>
<a name="upgrading-mermaid"></a>
<h2><a class="toc-backref" href="#id3">Upgrading Mermaid</a></h2>
<p>This information is only relevant for the development of this addon, not for users.</p>
<p>This addon uses a slightly tweaked build of Mermaid that works in older browsers. To reproduce it, take the following steps:</p>
<ul>
<li><p class="first">Clone <code>https://github.com/knsv/mermaid/</code></p>
</li>
<li><p class="first">Checkout the version you want to upgrade to (e.g. <code>git checkout 8.4.0</code>)</p>
</li>
<li><p class="first">In <code>webpack.config.base.js</code>, in <code>const jsRule = ...</code>, remove the <code>include</code> key (so all dependencies are transpiled)</p>
</li>
<li><p class="first">In <code>babel.config.js</code>, in <code>targets</code>, add some browsers besides <code>node: 'current'</code>. I arbitrarily went with this:</p>
<pre>
<code>targets: {
node: 'current',
ie: '11',
edge: '20',
firefox: '35',
chrome: '45',
safari: '9',
}</code>
</pre>
</li>
<li><p class="first">Run <code>yarn install</code></p>
</li>
<li><p class="first">Run <code>yarn build</code></p>
</li>
<li><p class="first">The completed file is now in <code>dist/mermaid.js</code>. Try running <code>grep 'let ' dist/mermaid.js</code> to make sure everything was transpiled. The only output should be from comments.</p>
</li>
<li><p class="first">Copy <code>dist/mermaid.js</code> to <code>web_widget_mermaid/static/lib/mermaid/mermaid.js</code>.</p>
</li>
<li><p class="first">Bump the version number in <code>__manifest__.py</code> to match the Mermaid version.</p>
</li>
</ul>
<a name="bug-tracker"></a>
<h2><a class="toc-backref" href="#id4">Bug Tracker</a></h2>
<p>Bugs are tracked on <a class="reference external" href="https://github.com/OCA/web/issues">GitHub Issues</a>.
In case of trouble, please check there if your issue has already been reported.
If you spotted it first, help us smashing it by providing a detailed and welcomed
<a class="reference external" href="https://github.com/OCA/web/issues/new?body=module:%20web_widget_mermaid%0Aversion:%2012.0%0A%0A**Steps%20to%20reproduce**%0A-%20...%0A%0A**Current%20behavior**%0A%0A**Expected%20behavior**">feedback</a>.</p>
<p>Do not contact contributors directly about support or help with technical issues.</p>
<a name="credits"></a>
<h2><a class="toc-backref" href="#id5">Credits</a></h2>
<a name="authors"></a>
<h3><a class="toc-backref" href="#id6">Authors</a></h3>
<ul class="simple">
<li>Therp BV</li>
</ul>
<a name="contributors"></a>
<h3><a class="toc-backref" href="#id7">Contributors</a></h3>
<ul class="simple">
<li>Jan Verbeek <<a class="reference external" href="mailto:jverbeek@therp.nl">jverbeek@therp.nl</a>></li>
</ul>
<a name="maintainers"></a>
<h3><a class="toc-backref" href="#id8">Maintainers</a></h3>
<p>This module is maintained by the OCA.</p>
<a class="reference external image-reference" href="https://odoo-community.org"><img alt="Odoo Community Association" src="https://odoo-community.org/logo.png" /></a>
<p>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.</p>
<p>This module is part of the <a class="reference external" href="https://github.com/OCA/web/tree/12.0/web_widget_mermaid">OCA/web</a> project on GitHub.</p>
<p>You are welcome to contribute. To learn how please visit <a class="reference external" href="https://odoo-community.org/page/Contribute">https://odoo-community.org/page/Contribute</a>.</p>