3
0
Fork 0
web_techsystech/web_widget_mermaid/readme/USAGE.rst

59 lines
2.0 KiB
ReStructuredText

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 <https://mermaidjs.github.io/#/mermaidAPI?id=configuration>`_::
<field name="flowchart"
widget="mermaid"
options='{"theme": "forest", "gantt": {"fontSize": 14}}'/>
The syntax for creating diagrams is described in
`mermaid's documentation <https://mermaidjs.github.io/#/flowchart>`_.
As an example, this text::
graph LR
10.0 --> 11.0
11.0 --> 12.0
12.0 -.-> 13.0
Produces this flowchart:
.. image:: ./static/description/flowchart_example.png
:alt: 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.