From d91e202bbb1304c3c8345c64cc8ccd8d01de8634 Mon Sep 17 00:00:00 2001 From: RoboHeart Date: Wed, 28 Sep 2022 08:57:42 +0200 Subject: [PATCH 1/9] [ADD] web_widget_mermaid from v12.0 Using the last official version of module web_widget_mermaid as a base for the migration to v15.0 --- web_widget_mermaid/README.rst | 136 +++++ web_widget_mermaid/__init__.py | 1 + web_widget_mermaid/__manifest__.py | 19 + .../demo/res_users_flowchart.xml | 25 + web_widget_mermaid/i18n/ca.po | 27 + web_widget_mermaid/i18n/es.po | 27 + web_widget_mermaid/i18n/fr.po | 27 + web_widget_mermaid/i18n/pt_BR.po | 27 + .../i18n/web_widget_mermaid.pot | 25 + web_widget_mermaid/readme/CONTRIBUTORS.rst | 1 + web_widget_mermaid/readme/DESCRIPTION.rst | 2 + web_widget_mermaid/readme/USAGE.rst | 58 +++ .../static/description/flowchart_example.png | Bin 0 -> 1121 bytes .../static/description/icon.png | Bin 0 -> 9455 bytes .../static/description/index.html | 488 ++++++++++++++++++ .../static/src/js/web_widget_mermaid.js | 113 ++++ .../web_widget_mermaid_default_theme.scss | 408 +++++++++++++++ .../view/web_widget_mermaid_view.xml | 10 + 18 files changed, 1394 insertions(+) create mode 100644 web_widget_mermaid/README.rst create mode 100644 web_widget_mermaid/__init__.py create mode 100644 web_widget_mermaid/__manifest__.py create mode 100644 web_widget_mermaid/demo/res_users_flowchart.xml create mode 100644 web_widget_mermaid/i18n/ca.po create mode 100644 web_widget_mermaid/i18n/es.po create mode 100644 web_widget_mermaid/i18n/fr.po create mode 100644 web_widget_mermaid/i18n/pt_BR.po create mode 100644 web_widget_mermaid/i18n/web_widget_mermaid.pot create mode 100644 web_widget_mermaid/readme/CONTRIBUTORS.rst create mode 100644 web_widget_mermaid/readme/DESCRIPTION.rst create mode 100644 web_widget_mermaid/readme/USAGE.rst create mode 100644 web_widget_mermaid/static/description/flowchart_example.png create mode 100644 web_widget_mermaid/static/description/icon.png create mode 100644 web_widget_mermaid/static/description/index.html create mode 100644 web_widget_mermaid/static/src/js/web_widget_mermaid.js create mode 100644 web_widget_mermaid/static/src/scss/web_widget_mermaid_default_theme.scss create mode 100644 web_widget_mermaid/view/web_widget_mermaid_view.xml diff --git a/web_widget_mermaid/README.rst b/web_widget_mermaid/README.rst new file mode 100644 index 000000000000..82f2dd299aa8 --- /dev/null +++ b/web_widget_mermaid/README.rst @@ -0,0 +1,136 @@ +======================== +Mermaid flowchart widget +======================== + +.. !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! + !! This file is generated by oca-gen-addon-readme !! + !! changes will be overwritten. !! + !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! + +.. |badge1| image:: https://img.shields.io/badge/maturity-Beta-yellow.png + :target: https://odoo-community.org/page/development-status + :alt: Beta +.. |badge2| image:: https://img.shields.io/badge/licence-AGPL--3-blue.png + :target: http://www.gnu.org/licenses/agpl-3.0-standalone.html + :alt: License: AGPL-3 +.. |badge3| image:: https://img.shields.io/badge/github-OCA%2Fweb-lightgray.png?logo=github + :target: https://github.com/OCA/web/tree/12.0/web_widget_mermaid + :alt: OCA/web +.. |badge4| image:: https://img.shields.io/badge/weblate-Translate%20me-F47D42.png + :target: https://translation.odoo-community.org/projects/web-12-0/web-12-0-web_widget_mermaid + :alt: Translate me on Weblate +.. |badge5| image:: https://img.shields.io/badge/runbot-Try%20me-875A7B.png + :target: https://runbot.odoo-community.org/runbot/162/12.0 + :alt: Try me on Runbot + +|badge1| |badge2| |badge3| |badge4| |badge5| + +This module adds a basic widget for rendering text fields as flowcharts using +`mermaid `_. + +**Table of contents** + +.. contents:: + :local: + +Usage +===== + +Put a ``widget="mermaid"`` attribute in relevant field tags in the view +declaration:: + + + +Optionally, use an ``options`` attribute to pass a JSON object with +`mermaid configuration `_:: + + + +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: + +.. image:: https://raw.githubusercontent.com/OCA/web/12.0/web_widget_mermaid/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. + +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 smashing 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 +~~~~~~~~~~~~ + +* Jan Verbeek + +Maintainers +~~~~~~~~~~~ + +This module is maintained by the OCA. + +.. image:: https://odoo-community.org/logo.png + :alt: Odoo Community Association + :target: https://odoo-community.org + +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. diff --git a/web_widget_mermaid/__init__.py b/web_widget_mermaid/__init__.py new file mode 100644 index 000000000000..e58fedf205f1 --- /dev/null +++ b/web_widget_mermaid/__init__.py @@ -0,0 +1 @@ +# License AGPL-3.0 or later (https://www.gnu.org/licenses/agpl.html) diff --git a/web_widget_mermaid/__manifest__.py b/web_widget_mermaid/__manifest__.py new file mode 100644 index 000000000000..d3bd469b023b --- /dev/null +++ b/web_widget_mermaid/__manifest__.py @@ -0,0 +1,19 @@ +# Copyright 2019 Therp BV +# License AGPL-3.0 or later (https://www.gnu.org/licenses/agpl.html) + +{ + "name": "Mermaid flowchart widget", + "category": "Web", + "author": "Therp BV,Odoo Community Association (OCA)", + "version": "12.0.8.4.0", + "license": "AGPL-3", + "summary": "Render mermaid markdown flowcharts", + "website": "https://github.com/OCA/web", + "depends": ['web'], + "data": [ + "view/web_widget_mermaid_view.xml", + ], + "demo": [ + "demo/res_users_flowchart.xml", + ], +} diff --git a/web_widget_mermaid/demo/res_users_flowchart.xml b/web_widget_mermaid/demo/res_users_flowchart.xml new file mode 100644 index 000000000000..0322d81f1210 --- /dev/null +++ b/web_widget_mermaid/demo/res_users_flowchart.xml @@ -0,0 +1,25 @@ + + + + x_flowchart + + Demo mermaid flowchart + char + + + + res.users + + + + + + + + + + graph TD +A[This is an example flowchart] --> B{{Edit it}} +B -. save it .-> C(See what happens) + + diff --git a/web_widget_mermaid/i18n/ca.po b/web_widget_mermaid/i18n/ca.po new file mode 100644 index 000000000000..c77553ff4034 --- /dev/null +++ b/web_widget_mermaid/i18n/ca.po @@ -0,0 +1,27 @@ +# Translation of Odoo Server. +# This file contains the translation of the following modules: +# * web_widget_mermaid +# +msgid "" +msgstr "" +"Project-Id-Version: Odoo Server 12.0\n" +"Report-Msgid-Bugs-To: \n" +"PO-Revision-Date: 2021-02-17 13:45+0000\n" +"Last-Translator: claudiagn \n" +"Language-Team: none\n" +"Language: ca\n" +"MIME-Version: 1.0\n" +"Content-Type: text/plain; charset=UTF-8\n" +"Content-Transfer-Encoding: \n" +"Plural-Forms: nplurals=2; plural=n != 1;\n" +"X-Generator: Weblate 4.3.2\n" + +#. module: web_widget_mermaid +#: model:ir.model.fields,field_description:web_widget_mermaid.res_users_flowchart +msgid "Demo mermaid flowchart" +msgstr "Diagrama de flux de sirena de demostració" + +#. module: web_widget_mermaid +#: model_terms:ir.ui.view,arch_db:web_widget_mermaid.view_users_form_flowchart +msgid "Mermaid flowchart" +msgstr "Diagrama de flux de sirena" diff --git a/web_widget_mermaid/i18n/es.po b/web_widget_mermaid/i18n/es.po new file mode 100644 index 000000000000..1a628b8a9148 --- /dev/null +++ b/web_widget_mermaid/i18n/es.po @@ -0,0 +1,27 @@ +# Translation of Odoo Server. +# This file contains the translation of the following modules: +# * web_widget_mermaid +# +msgid "" +msgstr "" +"Project-Id-Version: Odoo Server 12.0\n" +"Report-Msgid-Bugs-To: \n" +"PO-Revision-Date: 2020-09-16 14:00+0000\n" +"Last-Translator: claudiagn \n" +"Language-Team: none\n" +"Language: es\n" +"MIME-Version: 1.0\n" +"Content-Type: text/plain; charset=UTF-8\n" +"Content-Transfer-Encoding: \n" +"Plural-Forms: nplurals=2; plural=n != 1;\n" +"X-Generator: Weblate 3.10\n" + +#. module: web_widget_mermaid +#: model:ir.model.fields,field_description:web_widget_mermaid.res_users_flowchart +msgid "Demo mermaid flowchart" +msgstr "Diagrama de flujo de sirena de demostración" + +#. module: web_widget_mermaid +#: model_terms:ir.ui.view,arch_db:web_widget_mermaid.view_users_form_flowchart +msgid "Mermaid flowchart" +msgstr "Diagrama de flujo de sirena" diff --git a/web_widget_mermaid/i18n/fr.po b/web_widget_mermaid/i18n/fr.po new file mode 100644 index 000000000000..24296e88096e --- /dev/null +++ b/web_widget_mermaid/i18n/fr.po @@ -0,0 +1,27 @@ +# Translation of Odoo Server. +# This file contains the translation of the following modules: +# * web_widget_mermaid +# +msgid "" +msgstr "" +"Project-Id-Version: Odoo Server 12.0\n" +"Report-Msgid-Bugs-To: \n" +"PO-Revision-Date: 2021-02-01 12:44+0000\n" +"Last-Translator: Yann Papouin \n" +"Language-Team: none\n" +"Language: fr\n" +"MIME-Version: 1.0\n" +"Content-Type: text/plain; charset=UTF-8\n" +"Content-Transfer-Encoding: \n" +"Plural-Forms: nplurals=2; plural=n > 1;\n" +"X-Generator: Weblate 4.3.2\n" + +#. module: web_widget_mermaid +#: model:ir.model.fields,field_description:web_widget_mermaid.res_users_flowchart +msgid "Demo mermaid flowchart" +msgstr "Organigramme de démonstration Mermaid" + +#. module: web_widget_mermaid +#: model_terms:ir.ui.view,arch_db:web_widget_mermaid.view_users_form_flowchart +msgid "Mermaid flowchart" +msgstr "Organigramme Mermaid" diff --git a/web_widget_mermaid/i18n/pt_BR.po b/web_widget_mermaid/i18n/pt_BR.po new file mode 100644 index 000000000000..705aea47a5c6 --- /dev/null +++ b/web_widget_mermaid/i18n/pt_BR.po @@ -0,0 +1,27 @@ +# Translation of Odoo Server. +# This file contains the translation of the following modules: +# * web_widget_mermaid +# +msgid "" +msgstr "" +"Project-Id-Version: Odoo Server 12.0\n" +"Report-Msgid-Bugs-To: \n" +"PO-Revision-Date: 2021-03-15 06:45+0000\n" +"Last-Translator: Marcel Savegnago \n" +"Language-Team: none\n" +"Language: pt_BR\n" +"MIME-Version: 1.0\n" +"Content-Type: text/plain; charset=UTF-8\n" +"Content-Transfer-Encoding: \n" +"Plural-Forms: nplurals=2; plural=n > 1;\n" +"X-Generator: Weblate 4.3.2\n" + +#. module: web_widget_mermaid +#: model:ir.model.fields,field_description:web_widget_mermaid.res_users_flowchart +msgid "Demo mermaid flowchart" +msgstr "Fluxograma de demonstração do mermaid" + +#. module: web_widget_mermaid +#: model_terms:ir.ui.view,arch_db:web_widget_mermaid.view_users_form_flowchart +msgid "Mermaid flowchart" +msgstr "Fluxograma Mermaid" diff --git a/web_widget_mermaid/i18n/web_widget_mermaid.pot b/web_widget_mermaid/i18n/web_widget_mermaid.pot new file mode 100644 index 000000000000..443eba65ec34 --- /dev/null +++ b/web_widget_mermaid/i18n/web_widget_mermaid.pot @@ -0,0 +1,25 @@ +# Translation of Odoo Server. +# This file contains the translation of the following modules: +# * web_widget_mermaid +# +msgid "" +msgstr "" +"Project-Id-Version: Odoo Server 12.0\n" +"Report-Msgid-Bugs-To: \n" +"Last-Translator: <>\n" +"Language-Team: \n" +"MIME-Version: 1.0\n" +"Content-Type: text/plain; charset=UTF-8\n" +"Content-Transfer-Encoding: \n" +"Plural-Forms: \n" + +#. module: web_widget_mermaid +#: model:ir.model.fields,field_description:web_widget_mermaid.res_users_flowchart +msgid "Demo mermaid flowchart" +msgstr "" + +#. module: web_widget_mermaid +#: model_terms:ir.ui.view,arch_db:web_widget_mermaid.view_users_form_flowchart +msgid "Mermaid flowchart" +msgstr "" + diff --git a/web_widget_mermaid/readme/CONTRIBUTORS.rst b/web_widget_mermaid/readme/CONTRIBUTORS.rst new file mode 100644 index 000000000000..672a6cc5afbb --- /dev/null +++ b/web_widget_mermaid/readme/CONTRIBUTORS.rst @@ -0,0 +1 @@ +* Jan Verbeek diff --git a/web_widget_mermaid/readme/DESCRIPTION.rst b/web_widget_mermaid/readme/DESCRIPTION.rst new file mode 100644 index 000000000000..96efcbb46ca5 --- /dev/null +++ b/web_widget_mermaid/readme/DESCRIPTION.rst @@ -0,0 +1,2 @@ +This module adds a basic widget for rendering text fields as flowcharts using +`mermaid `_. diff --git a/web_widget_mermaid/readme/USAGE.rst b/web_widget_mermaid/readme/USAGE.rst new file mode 100644 index 000000000000..4dff90c1b562 --- /dev/null +++ b/web_widget_mermaid/readme/USAGE.rst @@ -0,0 +1,58 @@ +Put a ``widget="mermaid"`` attribute in relevant field tags in the view +declaration:: + + + +Optionally, use an ``options`` attribute to pass a JSON object with +`mermaid configuration `_:: + + + +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: + +.. 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. diff --git a/web_widget_mermaid/static/description/flowchart_example.png b/web_widget_mermaid/static/description/flowchart_example.png new file mode 100644 index 0000000000000000000000000000000000000000..4c12b32cc3671eb11b8d2edcfe274f3a5a03f8fa GIT binary patch literal 1121 zcmZ9Mc}&x17{`kw1dO1v7*q^XGbUe{;0%IH&3dk`!+1#X9jySHk0X;b!M*%5V zEJ8UHYd4f~l(t-@R4P;`(3YD*eZPM^@AKv*+z#-u zJbd~v1Ol;y-tr8FKup5H+Qr-y^!#_c7vN(0&;uH3Zf-t3A2{wfq_}EXkIK9OT-Jq!;2%JMwUiLmL?|@laq>>8Rdr$ zD+}|$!UC`eYH@98aZRDv_{WG^sZ_75Y_6_u0f1)Bh-Q6#dt-fDy|JTK?`Sld?QQLj z5#8>tZf|d2tJUjt`u+Wb|1cN~A3+!Y(U**||Lu z=i}BzWagRSC!hsN+cNtHYPqnJTUNmDpWmqF#*PhUInGjnA5z=lxQFKkNMt6}{z@#= zFWeaTR7w-Yt_Qy1{@Rk04h=3q58BFIcNY-0^&TZ(IU%wWV&s(+8g`i;)M@8XZQb4b zbjioh8`^%Sv(1}h*)GVr;PeI zYAyhjQVGqGVp<4?e0vd6|4KKNl`FSLDQFkFaEEv~eP^|1^kb&-aqLHz^kLL2N1q1# zX4R@Y&6C-rKbT6@xwA)NRq+6stRMD=+jXq$Q?-`rR^%OZGCU_NcbkDlaM&T`34xeZ z`*d3;W2D{3Vd#b%*qDJhv826LoQu3uoIGJKwSyW|h&Wgkcou2qK7V~KJbBCJa?KP4 z&qQy2KL#c02?zc>}t&i?3%5i-F zf8H7Ni}{S!wkN`-KT0SFypR!WHN?nop4BRgQ-1LZF%%%nX(+c_V8S=)OIO>iU286i zYr92bMQFWKdbZNE>LYI2^Z%PAIM(EAu_Vej)l}WG$Fr1}!Cx;$zK*|IfWl7)O@j}G fD*t53ClqdR6)tX?#B)D^e+C5V72sL#aWC^<#2Aa~ literal 0 HcmV?d00001 diff --git a/web_widget_mermaid/static/description/icon.png b/web_widget_mermaid/static/description/icon.png new file mode 100644 index 0000000000000000000000000000000000000000..3a0328b516c4980e8e44cdb63fd945757ddd132d GIT binary patch literal 9455 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 z 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 Xviia!U7SGha1wx#SCgwmn*{w2TRX*I literal 0 HcmV?d00001 diff --git a/web_widget_mermaid/static/description/index.html b/web_widget_mermaid/static/description/index.html new file mode 100644 index 000000000000..cb9f640b4dc0 --- /dev/null +++ b/web_widget_mermaid/static/description/index.html @@ -0,0 +1,488 @@ + + + + + + +Mermaid flowchart widget + + + +
+

Mermaid flowchart widget

+ + +

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

+

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 smashing 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.

+
+
+
+ + diff --git a/web_widget_mermaid/static/src/js/web_widget_mermaid.js b/web_widget_mermaid/static/src/js/web_widget_mermaid.js new file mode 100644 index 000000000000..447851d51848 --- /dev/null +++ b/web_widget_mermaid/static/src/js/web_widget_mermaid.js @@ -0,0 +1,113 @@ +odoo.define('web.web_widget_mermaid', function(require) { + "use strict"; + + var core = require('web.core'); + var basic_fields = require('web.basic_fields'); + var field_registry = require('web.field_registry'); + + // Calling mermaid.initialize() multiple times is ok. + // But there's a catch: it will keep the config of previous calls unless + // explicitly overridden, instead of reverting to the default settings. + // Therefore we make the default config explicit. This is taken from + // https://mermaidjs.github.io/#/mermaidAPI?id=mermaidapi-configuration-defaults + // so try copying from there if you update to a new version of mermaid + // with new options/defaults. + // Changes to the original default are marked with comments. + + var defaultConfig = { + theme: null, // We define a custom Odoo theme in a stylesheet + logLevel: 'fatal', + securityLevel: 'strict', + startOnLoad: false, // Rendering is initiated manually + arrowMarkerAbsolute: false, + + flowchart: { + htmlLabels: true, + curve: 'linear', + }, + + sequence: { + diagramMarginX: 50, + diagramMarginY: 10, + actorMargin: 50, + width: 150, + height: 65, + boxMargin: 10, + boxTextMargin: 5, + noteMargin: 10, + messageMargin: 35, + mirrorActors: true, + bottomMarginAdj: 1, + useMaxWidth: true, + rightAngles: false, + showSequenceNumbers: false, + }, + + gantt: { + titleTopMargin: 25, + barHeight: 20, + barGap: 4, + topPadding: 50, + leftPadding: 75, + gridLineStartPadding: 35, + fontSize: 11, + fontFamily: '"Lucida Grande", Helvetica, Verdana, Arial, ' + + 'sans-serif', // Match Odoo's font choices + numberSectionStyles: 4, + // Match configured date format + axisFormat: core._t.database.parameters.date_format, + } + }; + + var MermaidField = basic_fields.FieldText.extend({ + init: function() { + this._super.apply(this, arguments); + this.chartId = _.uniqueId('mermaid_chart_'); + }, + className: 'o_form_field_mermaid', + _renderReadonly: function() { + if (!this.value) { + return; + } + var config = _.extend( + {}, + defaultConfig, + this.attrs.options + ); + mermaid.mermaidAPI.initialize(config); + try { + mermaid.mermaidAPI.render( + this.chartId, + this.value, + this.$el.html.bind(this.$el) + ); + } catch (e) { + this.$el.html($('
').text(e.message || e.str));
+            }
+            // Mermaid uses a temporary div for rendering. It doesn't remove
+            // it if an error occurs, and perhaps in other cases too, so get
+            // rid of it if it's still around. The id is based on the chartId.
+            $('#d' + this.chartId).remove();
+        },
+        _parseValue: function(value) {
+            if (this.errorMessage) {
+                this.errorMessage.remove();
+            }
+            try {
+                mermaid.parse(value);
+            } catch (e) {
+                this.errorMessage = $('
').text(e.message || e.str);
+                this.$el.after(this.errorMessage);
+                throw e;
+            }
+            return value;
+        },
+    });
+
+    field_registry.add('mermaid', MermaidField);
+
+    return {
+        MermaidField: MermaidField,
+        defaultConfig: defaultConfig,
+    };
+});
diff --git a/web_widget_mermaid/static/src/scss/web_widget_mermaid_default_theme.scss b/web_widget_mermaid/static/src/scss/web_widget_mermaid_default_theme.scss
new file mode 100644
index 000000000000..1f9aab9457d5
--- /dev/null
+++ b/web_widget_mermaid/static/src/scss/web_widget_mermaid_default_theme.scss
@@ -0,0 +1,408 @@
+.o_form_field_mermaid .label {
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+  text-align: inherit;
+  color: inherit;
+}
+
+.o_form_field_mermaid .node .label {
+  font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif;
+  color: $o-tooltip-color; }
+
+.o_form_field_mermaid .cluster .label {
+  font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif;
+  color: $o-main-text-color; }
+
+.o_form_field_mermaid .label text {
+  fill: $o-main-text-color; }
+
+.o_form_field_mermaid .node rect,
+.o_form_field_mermaid .node circle,
+.o_form_field_mermaid .node ellipse,
+.o_form_field_mermaid .node polygon {
+  fill: $o-brand-primary;
+  stroke: $o-brand-primary;
+  stroke-width: 1px; }
+
+.o_form_field_mermaid .node.clickable {
+  cursor: pointer; }
+
+.o_form_field_mermaid .arrowheadPath {
+  fill: $o-main-text-color; }
+
+.o_form_field_mermaid .edgePath .path {
+  stroke: $o-main-text-color;
+  stroke-width: 1.5px; }
+
+.o_form_field_mermaid .edgeLabel {
+  background-color: #e8e8e8; }
+
+.o_form_field_mermaid .cluster rect {
+  fill: $o-brand-secondary;
+  stroke: $o-main-color-muted;
+  stroke-width: 1px; }
+
+.o_form_field_mermaid .cluster text {
+  fill: $o-main-text-color; }
+
+.o_form_field_mermaid div.mermaidTooltip {
+  position: absolute;
+  text-align: center;
+  max-width: 200px;
+  padding: 2px;
+  font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif;
+  font-size: 12px;
+  background: $o-brand-secondary;
+  border: 1px solid $o-main-color-muted;
+  border-radius: 2px;
+  pointer-events: none;
+  z-index: 100; }
+
+.o_form_field_mermaid .actor {
+  stroke: $o-brand-primary;
+  fill: $o-brand-primary; }
+
+.o_form_field_mermaid text.actor {
+  fill: white;
+  stroke: none; }
+
+.o_form_field_mermaid .actor-line {
+  stroke: grey; }
+
+.o_form_field_mermaid .messageLine0 {
+  stroke-width: 1.5;
+  stroke-dasharray: '2 2';
+  stroke: $o-main-text-color; }
+
+.o_form_field_mermaid .messageLine1 {
+  stroke-width: 1.5;
+  stroke-dasharray: '2 2';
+  stroke: $o-main-text-color; }
+
+.o_form_field_mermaid #arrowhead {
+  fill: $o-main-text-color; }
+
+.o_form_field_mermaid .sequenceNumber {
+  fill: white; }
+
+.o_form_field_mermaid #sequencenumber {
+  fill: $o-main-text-color; }
+
+.o_form_field_mermaid #crosshead path {
+  fill: $o-main-text-color !important;
+  stroke: $o-main-text-color !important; }
+
+.o_form_field_mermaid .messageText {
+  fill: $o-main-text-color;
+  stroke: none; }
+
+.o_form_field_mermaid .labelBox {
+  stroke: $o-brand-primary;
+  fill: $o-brand-primary; }
+
+.o_form_field_mermaid .labelText {
+  fill: white;
+  stroke: none; }
+
+.o_form_field_mermaid .loopText {
+  fill: white;
+  stroke: none; }
+
+.o_form_field_mermaid .loopLine {
+  stroke-width: 2;
+  stroke-dasharray: '2 2';
+  stroke: $o-brand-primary; }
+
+.o_form_field_mermaid .note {
+  stroke: $o-main-color-muted;
+  fill: #fff5ad; }
+
+.o_form_field_mermaid .noteText {
+  fill: black;
+  stroke: none;
+  font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif;
+  font-size: 14px; }
+
+.o_form_field_mermaid .activation0 {
+  fill: #f4f4f4;
+  stroke: #666; }
+
+.o_form_field_mermaid .activation1 {
+  fill: #f4f4f4;
+  stroke: #666; }
+
+.o_form_field_mermaid .activation2 {
+  fill: #f4f4f4;
+  stroke: #666; }
+
+/** Section styling */
+.o_form_field_mermaid .section {
+  stroke: none;
+  opacity: 0.2; }
+
+.o_form_field_mermaid .section0 {
+  fill: rgba(102, 102, 255, 0.49); }
+
+.o_form_field_mermaid .section2 {
+  fill: #fff400; }
+
+.o_form_field_mermaid .section1,
+.o_form_field_mermaid .section3 {
+  fill: white;
+  opacity: 0.2; }
+
+.o_form_field_mermaid .sectionTitle0 {
+  fill: $o-main-text-color; }
+
+.o_form_field_mermaid .sectionTitle1 {
+  fill: $o-main-text-color; }
+
+.o_form_field_mermaid .sectionTitle2 {
+  fill: $o-main-text-color; }
+
+.o_form_field_mermaid .sectionTitle3 {
+  fill: $o-main-text-color; }
+
+.o_form_field_mermaid .sectionTitle {
+  text-anchor: start;
+  font-size: 11px;
+  text-height: 14px; }
+
+/* Grid and axis */
+.o_form_field_mermaid .grid .tick {
+  stroke: lightgrey;
+  opacity: 0.3;
+  shape-rendering: crispEdges; }
+
+.o_form_field_mermaid .grid path {
+  stroke-width: 0; }
+
+/* Today line */
+.o_form_field_mermaid .today {
+  fill: none;
+  stroke: red;
+  stroke-width: 2px; }
+
+/* Task styling */
+/* Default task */
+.o_form_field_mermaid .task {
+  stroke-width: 2; }
+
+.o_form_field_mermaid .taskText {
+  text-anchor: middle;
+  font-size: 11px; }
+
+.o_form_field_mermaid .taskTextOutsideRight {
+  fill: $o-main-text-color;
+  text-anchor: start;
+  font-size: 11px; }
+
+.o_form_field_mermaid .taskTextOutsideLeft {
+  fill: $o-main-text-color;
+  text-anchor: end;
+  font-size: 11px; }
+
+/* Special case clickable */
+.o_form_field_mermaid .task.clickable {
+  cursor: pointer; }
+
+.o_form_field_mermaid .taskText.clickable {
+  cursor: pointer;
+  fill: #003163 !important;
+  font-weight: bold; }
+
+.o_form_field_mermaid .taskTextOutsideLeft.clickable {
+  cursor: pointer;
+  fill: #003163 !important;
+  font-weight: bold; }
+
+.o_form_field_mermaid .taskTextOutsideRight.clickable {
+  cursor: pointer;
+  fill: #003163 !important;
+  font-weight: bold; }
+
+/* Specific task settings for the sections*/
+.o_form_field_mermaid .taskText0,
+.o_form_field_mermaid .taskText1,
+.o_form_field_mermaid .taskText2,
+.o_form_field_mermaid .taskText3 {
+  fill: white; }
+
+.o_form_field_mermaid .task0,
+.o_form_field_mermaid .task1,
+.o_form_field_mermaid .task2,
+.o_form_field_mermaid .task3 {
+  fill: $o-brand-primary;
+  stroke: $o-brand-primary; }
+
+.o_form_field_mermaid .taskTextOutside0,
+.o_form_field_mermaid .taskTextOutside2 {
+  fill: $o-main-text-color; }
+
+.o_form_field_mermaid .taskTextOutside1,
+.o_form_field_mermaid .taskTextOutside3 {
+  fill: $o-main-text-color; }
+
+/* Active task */
+.o_form_field_mermaid .active0,
+.o_form_field_mermaid .active1,
+.o_form_field_mermaid .active2,
+.o_form_field_mermaid .active3 {
+  fill: #bfc7ff;
+  stroke: $o-brand-primary; }
+
+.o_form_field_mermaid .activeText0,
+.o_form_field_mermaid .activeText1,
+.o_form_field_mermaid .activeText2,
+.o_form_field_mermaid .activeText3 {
+  fill: $o-main-text-color !important; }
+
+/* Completed task */
+.o_form_field_mermaid .done0,
+.o_form_field_mermaid .done1,
+.o_form_field_mermaid .done2,
+.o_form_field_mermaid .done3 {
+  stroke: grey;
+  fill: lightgrey;
+  stroke-width: 2; }
+
+.o_form_field_mermaid .doneText0,
+.o_form_field_mermaid .doneText1,
+.o_form_field_mermaid .doneText2,
+.o_form_field_mermaid .doneText3 {
+  fill: $o-main-text-color !important; }
+
+/* Tasks on the critical line */
+.o_form_field_mermaid .crit0,
+.o_form_field_mermaid .crit1,
+.o_form_field_mermaid .crit2,
+.o_form_field_mermaid .crit3 {
+  stroke: #ff8888;
+  fill: red;
+  stroke-width: 2; }
+
+.o_form_field_mermaid .activeCrit0,
+.o_form_field_mermaid .activeCrit1,
+.o_form_field_mermaid .activeCrit2,
+.o_form_field_mermaid .activeCrit3 {
+  stroke: #ff8888;
+  fill: #bfc7ff;
+  stroke-width: 2; }
+
+.o_form_field_mermaid .doneCrit0,
+.o_form_field_mermaid .doneCrit1,
+.o_form_field_mermaid .doneCrit2,
+.o_form_field_mermaid .doneCrit3 {
+  stroke: #ff8888;
+  fill: lightgrey;
+  stroke-width: 2;
+  cursor: pointer;
+  shape-rendering: crispEdges; }
+
+.o_form_field_mermaid .milestone {
+  transform: rotate(45deg) scale(0.8, 0.8); }
+
+.o_form_field_mermaid .milestoneText {
+  font-style: italic; }
+
+.o_form_field_mermaid .doneCritText0,
+.o_form_field_mermaid .doneCritText1,
+.o_form_field_mermaid .doneCritText2,
+.o_form_field_mermaid .doneCritText3 {
+  fill: $o-main-text-color !important; }
+
+.o_form_field_mermaid .activeCritText0,
+.o_form_field_mermaid .activeCritText1,
+.o_form_field_mermaid .activeCritText2,
+.o_form_field_mermaid .activeCritText3 {
+  fill: $o-main-text-color !important; }
+
+.o_form_field_mermaid .titleText {
+  text-anchor: middle;
+  font-size: 18px;
+  fill: $o-main-text-color; }
+
+.o_form_field_mermaid g.classGroup text {
+  fill: white;
+  stroke: none;
+  font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif;
+  font-size: 10px; }
+
+.o_form_field_mermaid g.classGroup rect {
+  fill: $o-brand-primary;
+  stroke: $o-main-text-color; }
+
+.o_form_field_mermaid g.classGroup line {
+  stroke: $o-main-text-color;
+  stroke-width: 1; }
+
+.o_form_field_mermaid .classLabel .box {
+  stroke: none;
+  stroke-width: 0;
+  fill: $o-brand-primary;
+  opacity: 0.5; }
+
+.o_form_field_mermaid .classLabel .label {
+  fill: $o-main-text-color;
+  font-size: 10px;
+  font-weight: normal; }
+
+.o_form_field_mermaid .relation {
+  stroke: $o-main-text-color;
+  stroke-width: 1;
+  fill: none; }
+
+.o_form_field_mermaid #compositionStart {
+  fill: $o-main-text-color;
+  stroke: $o-main-text-color;
+  stroke-width: 1; }
+
+.o_form_field_mermaid #compositionEnd {
+  fill: $o-main-text-color;
+  stroke: $o-main-text-color;
+  stroke-width: 1; }
+
+.o_form_field_mermaid #aggregationStart {
+  fill: $o-brand-primary;
+  stroke: $o-main-text-color;
+  stroke-width: 1; }
+
+.o_form_field_mermaid #aggregationEnd {
+  fill: $o-brand-primary;
+  stroke: $o-main-text-color;
+  stroke-width: 1; }
+
+.o_form_field_mermaid #dependencyStart {
+  fill: $o-main-text-color;
+  stroke: $o-main-text-color;
+  stroke-width: 1; }
+
+.o_form_field_mermaid #dependencyEnd {
+  fill: $o-main-text-color;
+  stroke: $o-main-text-color;
+  stroke-width: 1; }
+
+.o_form_field_mermaid #extensionStart {
+  fill: $o-main-text-color;
+  stroke: $o-main-text-color;
+  stroke-width: 1; }
+
+.o_form_field_mermaid #extensionEnd {
+  fill: $o-main-text-color;
+  stroke: $o-main-text-color;
+  stroke-width: 1; }
+
+.o_form_field_mermaid .commit-id,
+.o_form_field_mermaid .commit-msg,
+.o_form_field_mermaid .branch-label {
+  fill: lightgrey;
+  color: $o-main-text-color; }
+
+.o_form_field_mermaid .node-label p {
+  margin-top: 9px; }
+
+.o_form_field_mermaid .pieTitleText {
+  text-anchor: middle;
+  font-size: 25px;
+  fill: $o-main-text-color; }
diff --git a/web_widget_mermaid/view/web_widget_mermaid_view.xml b/web_widget_mermaid/view/web_widget_mermaid_view.xml
new file mode 100644
index 000000000000..0f2a67293c6b
--- /dev/null
+++ b/web_widget_mermaid/view/web_widget_mermaid_view.xml
@@ -0,0 +1,10 @@
+
+
+    
+

From c2d59cc6113f7c22b55e15789ce376d806a1908b Mon Sep 17 00:00:00 2001
From: RoboHeart 
Date: Wed, 28 Sep 2022 12:04:51 +0200
Subject: [PATCH 2/9] [IMP] Add assets

Using new asset definition via manifest and changed from static
mermaid.js file to external CDN.
Removed web_widget_mermaid_default_theme.scss and
web_widget_mermaid_view.xml from mainfest (detailed description in
upcoming commits)
---
 web_widget_mermaid/__manifest__.py | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/web_widget_mermaid/__manifest__.py b/web_widget_mermaid/__manifest__.py
index d3bd469b023b..8947abc061d9 100644
--- a/web_widget_mermaid/__manifest__.py
+++ b/web_widget_mermaid/__manifest__.py
@@ -5,15 +5,18 @@
     "name": "Mermaid flowchart widget",
     "category": "Web",
     "author": "Therp BV,Odoo Community Association (OCA)",
-    "version": "12.0.8.4.0",
+    "version": "15.0.1.0.0",
     "license": "AGPL-3",
     "summary": "Render mermaid markdown flowcharts",
     "website": "https://github.com/OCA/web",
-    "depends": ['web'],
-    "data": [
-        "view/web_widget_mermaid_view.xml",
-    ],
+    "depends": ["web"],
     "demo": [
         "demo/res_users_flowchart.xml",
     ],
+    "assets": {
+        "web.assets_common": [
+            "https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js",
+            "web_widget_mermaid/static/src/js/web_widget_mermaid.js",
+        ],
+    },
 }

From 7a5d838d2b4f7c4f01afc4aa15bd5f3cfd33a3b0 Mon Sep 17 00:00:00 2001
From: RoboHeart 
Date: Wed, 28 Sep 2022 12:11:52 +0200
Subject: [PATCH 3/9] [REM] Remove web_widget_mermaid_view.xml

This file is no longer needed since assets are now defined in
manifest file.
---
 web_widget_mermaid/view/web_widget_mermaid_view.xml | 10 ----------
 1 file changed, 10 deletions(-)
 delete mode 100644 web_widget_mermaid/view/web_widget_mermaid_view.xml

diff --git a/web_widget_mermaid/view/web_widget_mermaid_view.xml b/web_widget_mermaid/view/web_widget_mermaid_view.xml
deleted file mode 100644
index 0f2a67293c6b..000000000000
--- a/web_widget_mermaid/view/web_widget_mermaid_view.xml
+++ /dev/null
@@ -1,10 +0,0 @@
-
-
-    
-

From b54c5fe3d238ca9b56e9ab8066d31669e2bfc4f2 Mon Sep 17 00:00:00 2001
From: RoboHeart 
Date: Wed, 28 Sep 2022 12:15:07 +0200
Subject: [PATCH 4/9] [FIX] ESLint messages

Fixed ESLint messages. Due to issue with mermaid call, the definition
has been moved to init and was deactivated for rule 'no-undef'.
Inline comments has been moved to additional lines.
---
 .../static/src/js/web_widget_mermaid.js       | 28 +++++++++++--------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/web_widget_mermaid/static/src/js/web_widget_mermaid.js b/web_widget_mermaid/static/src/js/web_widget_mermaid.js
index 447851d51848..74f41d74967e 100644
--- a/web_widget_mermaid/static/src/js/web_widget_mermaid.js
+++ b/web_widget_mermaid/static/src/js/web_widget_mermaid.js
@@ -1,9 +1,9 @@
 odoo.define('web.web_widget_mermaid', function(require) {
     "use strict";
 
-    var core = require('web.core');
-    var basic_fields = require('web.basic_fields');
-    var field_registry = require('web.field_registry');
+    const core = require('web.core');
+    const basic_fields = require('web.basic_fields');
+    const field_registry = require('web.field_registry');
 
     // Calling mermaid.initialize() multiple times is ok.
     // But there's a catch: it will keep the config of previous calls unless
@@ -14,11 +14,13 @@ odoo.define('web.web_widget_mermaid', function(require) {
     // with new options/defaults.
     // Changes to the original default are marked with comments.
 
-    var defaultConfig = {
-        theme: null,  // We define a custom Odoo theme in a stylesheet
+    const defaultConfig = {
+        // Theme according Odoo colors (https://www.odoo.com/de_DE/page/brand-assets)
+        theme: null,
         logLevel: 'fatal',
         securityLevel: 'strict',
-        startOnLoad: false,  // Rendering is initiated manually
+        // Rendering is initiated manually
+        startOnLoad: false,
         arrowMarkerAbsolute: false,
 
         flowchart: {
@@ -51,32 +53,34 @@ odoo.define('web.web_widget_mermaid', function(require) {
             leftPadding: 75,
             gridLineStartPadding: 35,
             fontSize: 11,
+            // Match Odoo's font choices
             fontFamily: '"Lucida Grande", Helvetica, Verdana, Arial, '
-                        + 'sans-serif',  // Match Odoo's font choices
+                        + 'sans-serif',
             numberSectionStyles: 4,
             // Match configured date format
             axisFormat: core._t.database.parameters.date_format,
         }
     };
 
-    var MermaidField = basic_fields.FieldText.extend({
+    const MermaidField = basic_fields.FieldText.extend({
         init: function() {
             this._super.apply(this, arguments);
             this.chartId = _.uniqueId('mermaid_chart_');
+            this.mermaid = mermaid; // eslint-disable-line no-undef
         },
         className: 'o_form_field_mermaid',
         _renderReadonly: function() {
             if (!this.value) {
                 return;
             }
-            var config = _.extend(
+            const config = _.extend(
                 {},
                 defaultConfig,
                 this.attrs.options
             );
-            mermaid.mermaidAPI.initialize(config);
+            this.mermaid.mermaidAPI.initialize(config);
             try {
-                mermaid.mermaidAPI.render(
+                this.mermaid.mermaidAPI.render(
                     this.chartId,
                     this.value,
                     this.$el.html.bind(this.$el)
@@ -94,7 +98,7 @@ odoo.define('web.web_widget_mermaid', function(require) {
                 this.errorMessage.remove();
             }
             try {
-                mermaid.parse(value);
+                this.mermaid.parse(value);
             } catch (e) {
                 this.errorMessage = $('
').text(e.message || e.str);
                 this.$el.after(this.errorMessage);

From 3e084c832f0117a340333fe6514021bbb8480374 Mon Sep 17 00:00:00 2001
From: RoboHeart 
Date: Wed, 28 Sep 2022 13:03:46 +0200
Subject: [PATCH 5/9] [IMP] Add themeVariables to defaultConfig

Since it seems like null values are no longer working for theme
parameter, theme has been set to 'base' and theme config can completely
move to web_widget_mermaid.js.
web_widget_mermaid_default_theme.scss will be removed in upcoming
commit.
---
 .../static/src/js/web_widget_mermaid.js             | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/web_widget_mermaid/static/src/js/web_widget_mermaid.js b/web_widget_mermaid/static/src/js/web_widget_mermaid.js
index 74f41d74967e..85f2192adefa 100644
--- a/web_widget_mermaid/static/src/js/web_widget_mermaid.js
+++ b/web_widget_mermaid/static/src/js/web_widget_mermaid.js
@@ -16,7 +16,18 @@ odoo.define('web.web_widget_mermaid', function(require) {
 
     const defaultConfig = {
         // Theme according Odoo colors (https://www.odoo.com/de_DE/page/brand-assets)
-        theme: null,
+        // Mermaid site-wide theme config: 
+        // https://mermaid-js.github.io/mermaid/#/./theming?id=site-wide-themes
+        theme: 'base',
+        themeVariables: {
+            primaryColor: '#714B67',
+            primaryTextColor: '#FFFFFF',
+            primaryBorderColor: '#8F8F8F',
+            lineColor: '#8F8F8F',
+            textColor: '#8F8F8F',
+            darkMode: false,
+            fontSize: '20px',
+        },
         logLevel: 'fatal',
         securityLevel: 'strict',
         // Rendering is initiated manually

From 6c0f6dd57c2b3b8ca9b5be172af379a49c922a13 Mon Sep 17 00:00:00 2001
From: RoboHeart 
Date: Wed, 28 Sep 2022 13:11:20 +0200
Subject: [PATCH 6/9] [REM] Remove web_widget_mermaid_default_theme.scss

SCSS file of default theme can be removed since the theme config moved
to web_widget_mermaid.js.
---
 .../web_widget_mermaid_default_theme.scss     | 408 ------------------
 1 file changed, 408 deletions(-)
 delete mode 100644 web_widget_mermaid/static/src/scss/web_widget_mermaid_default_theme.scss

diff --git a/web_widget_mermaid/static/src/scss/web_widget_mermaid_default_theme.scss b/web_widget_mermaid/static/src/scss/web_widget_mermaid_default_theme.scss
deleted file mode 100644
index 1f9aab9457d5..000000000000
--- a/web_widget_mermaid/static/src/scss/web_widget_mermaid_default_theme.scss
+++ /dev/null
@@ -1,408 +0,0 @@
-.o_form_field_mermaid .label {
-  font-size: inherit;
-  font-weight: inherit;
-  line-height: inherit;
-  text-align: inherit;
-  color: inherit;
-}
-
-.o_form_field_mermaid .node .label {
-  font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif;
-  color: $o-tooltip-color; }
-
-.o_form_field_mermaid .cluster .label {
-  font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif;
-  color: $o-main-text-color; }
-
-.o_form_field_mermaid .label text {
-  fill: $o-main-text-color; }
-
-.o_form_field_mermaid .node rect,
-.o_form_field_mermaid .node circle,
-.o_form_field_mermaid .node ellipse,
-.o_form_field_mermaid .node polygon {
-  fill: $o-brand-primary;
-  stroke: $o-brand-primary;
-  stroke-width: 1px; }
-
-.o_form_field_mermaid .node.clickable {
-  cursor: pointer; }
-
-.o_form_field_mermaid .arrowheadPath {
-  fill: $o-main-text-color; }
-
-.o_form_field_mermaid .edgePath .path {
-  stroke: $o-main-text-color;
-  stroke-width: 1.5px; }
-
-.o_form_field_mermaid .edgeLabel {
-  background-color: #e8e8e8; }
-
-.o_form_field_mermaid .cluster rect {
-  fill: $o-brand-secondary;
-  stroke: $o-main-color-muted;
-  stroke-width: 1px; }
-
-.o_form_field_mermaid .cluster text {
-  fill: $o-main-text-color; }
-
-.o_form_field_mermaid div.mermaidTooltip {
-  position: absolute;
-  text-align: center;
-  max-width: 200px;
-  padding: 2px;
-  font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif;
-  font-size: 12px;
-  background: $o-brand-secondary;
-  border: 1px solid $o-main-color-muted;
-  border-radius: 2px;
-  pointer-events: none;
-  z-index: 100; }
-
-.o_form_field_mermaid .actor {
-  stroke: $o-brand-primary;
-  fill: $o-brand-primary; }
-
-.o_form_field_mermaid text.actor {
-  fill: white;
-  stroke: none; }
-
-.o_form_field_mermaid .actor-line {
-  stroke: grey; }
-
-.o_form_field_mermaid .messageLine0 {
-  stroke-width: 1.5;
-  stroke-dasharray: '2 2';
-  stroke: $o-main-text-color; }
-
-.o_form_field_mermaid .messageLine1 {
-  stroke-width: 1.5;
-  stroke-dasharray: '2 2';
-  stroke: $o-main-text-color; }
-
-.o_form_field_mermaid #arrowhead {
-  fill: $o-main-text-color; }
-
-.o_form_field_mermaid .sequenceNumber {
-  fill: white; }
-
-.o_form_field_mermaid #sequencenumber {
-  fill: $o-main-text-color; }
-
-.o_form_field_mermaid #crosshead path {
-  fill: $o-main-text-color !important;
-  stroke: $o-main-text-color !important; }
-
-.o_form_field_mermaid .messageText {
-  fill: $o-main-text-color;
-  stroke: none; }
-
-.o_form_field_mermaid .labelBox {
-  stroke: $o-brand-primary;
-  fill: $o-brand-primary; }
-
-.o_form_field_mermaid .labelText {
-  fill: white;
-  stroke: none; }
-
-.o_form_field_mermaid .loopText {
-  fill: white;
-  stroke: none; }
-
-.o_form_field_mermaid .loopLine {
-  stroke-width: 2;
-  stroke-dasharray: '2 2';
-  stroke: $o-brand-primary; }
-
-.o_form_field_mermaid .note {
-  stroke: $o-main-color-muted;
-  fill: #fff5ad; }
-
-.o_form_field_mermaid .noteText {
-  fill: black;
-  stroke: none;
-  font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif;
-  font-size: 14px; }
-
-.o_form_field_mermaid .activation0 {
-  fill: #f4f4f4;
-  stroke: #666; }
-
-.o_form_field_mermaid .activation1 {
-  fill: #f4f4f4;
-  stroke: #666; }
-
-.o_form_field_mermaid .activation2 {
-  fill: #f4f4f4;
-  stroke: #666; }
-
-/** Section styling */
-.o_form_field_mermaid .section {
-  stroke: none;
-  opacity: 0.2; }
-
-.o_form_field_mermaid .section0 {
-  fill: rgba(102, 102, 255, 0.49); }
-
-.o_form_field_mermaid .section2 {
-  fill: #fff400; }
-
-.o_form_field_mermaid .section1,
-.o_form_field_mermaid .section3 {
-  fill: white;
-  opacity: 0.2; }
-
-.o_form_field_mermaid .sectionTitle0 {
-  fill: $o-main-text-color; }
-
-.o_form_field_mermaid .sectionTitle1 {
-  fill: $o-main-text-color; }
-
-.o_form_field_mermaid .sectionTitle2 {
-  fill: $o-main-text-color; }
-
-.o_form_field_mermaid .sectionTitle3 {
-  fill: $o-main-text-color; }
-
-.o_form_field_mermaid .sectionTitle {
-  text-anchor: start;
-  font-size: 11px;
-  text-height: 14px; }
-
-/* Grid and axis */
-.o_form_field_mermaid .grid .tick {
-  stroke: lightgrey;
-  opacity: 0.3;
-  shape-rendering: crispEdges; }
-
-.o_form_field_mermaid .grid path {
-  stroke-width: 0; }
-
-/* Today line */
-.o_form_field_mermaid .today {
-  fill: none;
-  stroke: red;
-  stroke-width: 2px; }
-
-/* Task styling */
-/* Default task */
-.o_form_field_mermaid .task {
-  stroke-width: 2; }
-
-.o_form_field_mermaid .taskText {
-  text-anchor: middle;
-  font-size: 11px; }
-
-.o_form_field_mermaid .taskTextOutsideRight {
-  fill: $o-main-text-color;
-  text-anchor: start;
-  font-size: 11px; }
-
-.o_form_field_mermaid .taskTextOutsideLeft {
-  fill: $o-main-text-color;
-  text-anchor: end;
-  font-size: 11px; }
-
-/* Special case clickable */
-.o_form_field_mermaid .task.clickable {
-  cursor: pointer; }
-
-.o_form_field_mermaid .taskText.clickable {
-  cursor: pointer;
-  fill: #003163 !important;
-  font-weight: bold; }
-
-.o_form_field_mermaid .taskTextOutsideLeft.clickable {
-  cursor: pointer;
-  fill: #003163 !important;
-  font-weight: bold; }
-
-.o_form_field_mermaid .taskTextOutsideRight.clickable {
-  cursor: pointer;
-  fill: #003163 !important;
-  font-weight: bold; }
-
-/* Specific task settings for the sections*/
-.o_form_field_mermaid .taskText0,
-.o_form_field_mermaid .taskText1,
-.o_form_field_mermaid .taskText2,
-.o_form_field_mermaid .taskText3 {
-  fill: white; }
-
-.o_form_field_mermaid .task0,
-.o_form_field_mermaid .task1,
-.o_form_field_mermaid .task2,
-.o_form_field_mermaid .task3 {
-  fill: $o-brand-primary;
-  stroke: $o-brand-primary; }
-
-.o_form_field_mermaid .taskTextOutside0,
-.o_form_field_mermaid .taskTextOutside2 {
-  fill: $o-main-text-color; }
-
-.o_form_field_mermaid .taskTextOutside1,
-.o_form_field_mermaid .taskTextOutside3 {
-  fill: $o-main-text-color; }
-
-/* Active task */
-.o_form_field_mermaid .active0,
-.o_form_field_mermaid .active1,
-.o_form_field_mermaid .active2,
-.o_form_field_mermaid .active3 {
-  fill: #bfc7ff;
-  stroke: $o-brand-primary; }
-
-.o_form_field_mermaid .activeText0,
-.o_form_field_mermaid .activeText1,
-.o_form_field_mermaid .activeText2,
-.o_form_field_mermaid .activeText3 {
-  fill: $o-main-text-color !important; }
-
-/* Completed task */
-.o_form_field_mermaid .done0,
-.o_form_field_mermaid .done1,
-.o_form_field_mermaid .done2,
-.o_form_field_mermaid .done3 {
-  stroke: grey;
-  fill: lightgrey;
-  stroke-width: 2; }
-
-.o_form_field_mermaid .doneText0,
-.o_form_field_mermaid .doneText1,
-.o_form_field_mermaid .doneText2,
-.o_form_field_mermaid .doneText3 {
-  fill: $o-main-text-color !important; }
-
-/* Tasks on the critical line */
-.o_form_field_mermaid .crit0,
-.o_form_field_mermaid .crit1,
-.o_form_field_mermaid .crit2,
-.o_form_field_mermaid .crit3 {
-  stroke: #ff8888;
-  fill: red;
-  stroke-width: 2; }
-
-.o_form_field_mermaid .activeCrit0,
-.o_form_field_mermaid .activeCrit1,
-.o_form_field_mermaid .activeCrit2,
-.o_form_field_mermaid .activeCrit3 {
-  stroke: #ff8888;
-  fill: #bfc7ff;
-  stroke-width: 2; }
-
-.o_form_field_mermaid .doneCrit0,
-.o_form_field_mermaid .doneCrit1,
-.o_form_field_mermaid .doneCrit2,
-.o_form_field_mermaid .doneCrit3 {
-  stroke: #ff8888;
-  fill: lightgrey;
-  stroke-width: 2;
-  cursor: pointer;
-  shape-rendering: crispEdges; }
-
-.o_form_field_mermaid .milestone {
-  transform: rotate(45deg) scale(0.8, 0.8); }
-
-.o_form_field_mermaid .milestoneText {
-  font-style: italic; }
-
-.o_form_field_mermaid .doneCritText0,
-.o_form_field_mermaid .doneCritText1,
-.o_form_field_mermaid .doneCritText2,
-.o_form_field_mermaid .doneCritText3 {
-  fill: $o-main-text-color !important; }
-
-.o_form_field_mermaid .activeCritText0,
-.o_form_field_mermaid .activeCritText1,
-.o_form_field_mermaid .activeCritText2,
-.o_form_field_mermaid .activeCritText3 {
-  fill: $o-main-text-color !important; }
-
-.o_form_field_mermaid .titleText {
-  text-anchor: middle;
-  font-size: 18px;
-  fill: $o-main-text-color; }
-
-.o_form_field_mermaid g.classGroup text {
-  fill: white;
-  stroke: none;
-  font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif;
-  font-size: 10px; }
-
-.o_form_field_mermaid g.classGroup rect {
-  fill: $o-brand-primary;
-  stroke: $o-main-text-color; }
-
-.o_form_field_mermaid g.classGroup line {
-  stroke: $o-main-text-color;
-  stroke-width: 1; }
-
-.o_form_field_mermaid .classLabel .box {
-  stroke: none;
-  stroke-width: 0;
-  fill: $o-brand-primary;
-  opacity: 0.5; }
-
-.o_form_field_mermaid .classLabel .label {
-  fill: $o-main-text-color;
-  font-size: 10px;
-  font-weight: normal; }
-
-.o_form_field_mermaid .relation {
-  stroke: $o-main-text-color;
-  stroke-width: 1;
-  fill: none; }
-
-.o_form_field_mermaid #compositionStart {
-  fill: $o-main-text-color;
-  stroke: $o-main-text-color;
-  stroke-width: 1; }
-
-.o_form_field_mermaid #compositionEnd {
-  fill: $o-main-text-color;
-  stroke: $o-main-text-color;
-  stroke-width: 1; }
-
-.o_form_field_mermaid #aggregationStart {
-  fill: $o-brand-primary;
-  stroke: $o-main-text-color;
-  stroke-width: 1; }
-
-.o_form_field_mermaid #aggregationEnd {
-  fill: $o-brand-primary;
-  stroke: $o-main-text-color;
-  stroke-width: 1; }
-
-.o_form_field_mermaid #dependencyStart {
-  fill: $o-main-text-color;
-  stroke: $o-main-text-color;
-  stroke-width: 1; }
-
-.o_form_field_mermaid #dependencyEnd {
-  fill: $o-main-text-color;
-  stroke: $o-main-text-color;
-  stroke-width: 1; }
-
-.o_form_field_mermaid #extensionStart {
-  fill: $o-main-text-color;
-  stroke: $o-main-text-color;
-  stroke-width: 1; }
-
-.o_form_field_mermaid #extensionEnd {
-  fill: $o-main-text-color;
-  stroke: $o-main-text-color;
-  stroke-width: 1; }
-
-.o_form_field_mermaid .commit-id,
-.o_form_field_mermaid .commit-msg,
-.o_form_field_mermaid .branch-label {
-  fill: lightgrey;
-  color: $o-main-text-color; }
-
-.o_form_field_mermaid .node-label p {
-  margin-top: 9px; }
-
-.o_form_field_mermaid .pieTitleText {
-  text-anchor: middle;
-  font-size: 25px;
-  fill: $o-main-text-color; }

From 2cc09802ed6b38be1303d6895d991cf03924dcd8 Mon Sep 17 00:00:00 2001
From: RoboHeart 
Date: Fri, 30 Sep 2022 13:35:10 +0200
Subject: [PATCH 7/9] [FIX] pre-commit issues (prettier)

---
 .../demo/res_users_flowchart.xml              |  2 +-
 .../static/src/js/web_widget_mermaid.js       | 59 +++++++++----------
 2 files changed, 28 insertions(+), 33 deletions(-)

diff --git a/web_widget_mermaid/demo/res_users_flowchart.xml b/web_widget_mermaid/demo/res_users_flowchart.xml
index 0322d81f1210..8ca3a78adf31 100644
--- a/web_widget_mermaid/demo/res_users_flowchart.xml
+++ b/web_widget_mermaid/demo/res_users_flowchart.xml
@@ -1,4 +1,4 @@
-
+
 
     
         x_flowchart
diff --git a/web_widget_mermaid/static/src/js/web_widget_mermaid.js b/web_widget_mermaid/static/src/js/web_widget_mermaid.js
index 85f2192adefa..86ece1bf208e 100644
--- a/web_widget_mermaid/static/src/js/web_widget_mermaid.js
+++ b/web_widget_mermaid/static/src/js/web_widget_mermaid.js
@@ -1,9 +1,9 @@
-odoo.define('web.web_widget_mermaid', function(require) {
+odoo.define("web.web_widget_mermaid", function (require) {
     "use strict";
 
-    const core = require('web.core');
-    const basic_fields = require('web.basic_fields');
-    const field_registry = require('web.field_registry');
+    const core = require("web.core");
+    const basic_fields = require("web.basic_fields");
+    const field_registry = require("web.field_registry");
 
     // Calling mermaid.initialize() multiple times is ok.
     // But there's a catch: it will keep the config of previous calls unless
@@ -16,27 +16,27 @@ odoo.define('web.web_widget_mermaid', function(require) {
 
     const defaultConfig = {
         // Theme according Odoo colors (https://www.odoo.com/de_DE/page/brand-assets)
-        // Mermaid site-wide theme config: 
+        // Mermaid site-wide theme config:
         // https://mermaid-js.github.io/mermaid/#/./theming?id=site-wide-themes
-        theme: 'base',
+        theme: "base",
         themeVariables: {
-            primaryColor: '#714B67',
-            primaryTextColor: '#FFFFFF',
-            primaryBorderColor: '#8F8F8F',
-            lineColor: '#8F8F8F',
-            textColor: '#8F8F8F',
+            primaryColor: "#714B67",
+            primaryTextColor: "#FFFFFF",
+            primaryBorderColor: "#8F8F8F",
+            lineColor: "#8F8F8F",
+            textColor: "#8F8F8F",
             darkMode: false,
-            fontSize: '20px',
+            fontSize: "20px",
         },
-        logLevel: 'fatal',
-        securityLevel: 'strict',
+        logLevel: "fatal",
+        securityLevel: "strict",
         // Rendering is initiated manually
         startOnLoad: false,
         arrowMarkerAbsolute: false,
 
         flowchart: {
             htmlLabels: true,
-            curve: 'linear',
+            curve: "linear",
         },
 
         sequence: {
@@ -65,30 +65,25 @@ odoo.define('web.web_widget_mermaid', function(require) {
             gridLineStartPadding: 35,
             fontSize: 11,
             // Match Odoo's font choices
-            fontFamily: '"Lucida Grande", Helvetica, Verdana, Arial, '
-                        + 'sans-serif',
+            fontFamily: '"Lucida Grande", Helvetica, Verdana, Arial, ' + "sans-serif",
             numberSectionStyles: 4,
             // Match configured date format
             axisFormat: core._t.database.parameters.date_format,
-        }
+        },
     };
 
     const MermaidField = basic_fields.FieldText.extend({
-        init: function() {
+        init: function () {
             this._super.apply(this, arguments);
-            this.chartId = _.uniqueId('mermaid_chart_');
+            this.chartId = _.uniqueId("mermaid_chart_");
             this.mermaid = mermaid; // eslint-disable-line no-undef
         },
-        className: 'o_form_field_mermaid',
-        _renderReadonly: function() {
+        className: "o_form_field_mermaid",
+        _renderReadonly: function () {
             if (!this.value) {
                 return;
             }
-            const config = _.extend(
-                {},
-                defaultConfig,
-                this.attrs.options
-            );
+            const config = _.extend({}, defaultConfig, this.attrs.options);
             this.mermaid.mermaidAPI.initialize(config);
             try {
                 this.mermaid.mermaidAPI.render(
@@ -97,21 +92,21 @@ odoo.define('web.web_widget_mermaid', function(require) {
                     this.$el.html.bind(this.$el)
                 );
             } catch (e) {
-                this.$el.html($('
').text(e.message || e.str));
+                this.$el.html($("
").text(e.message || e.str));
             }
             // Mermaid uses a temporary div for rendering. It doesn't remove
             // it if an error occurs, and perhaps in other cases too, so get
             // rid of it if it's still around. The id is based on the chartId.
-            $('#d' + this.chartId).remove();
+            $("#d" + this.chartId).remove();
         },
-        _parseValue: function(value) {
+        _parseValue: function (value) {
             if (this.errorMessage) {
                 this.errorMessage.remove();
             }
             try {
                 this.mermaid.parse(value);
             } catch (e) {
-                this.errorMessage = $('
').text(e.message || e.str);
+                this.errorMessage = $("
").text(e.message || e.str);
                 this.$el.after(this.errorMessage);
                 throw e;
             }
@@ -119,7 +114,7 @@ odoo.define('web.web_widget_mermaid', function(require) {
         },
     });
 
-    field_registry.add('mermaid', MermaidField);
+    field_registry.add("mermaid", MermaidField);
 
     return {
         MermaidField: MermaidField,

From c2e2378ac6434fb75c451a1f9d4f33c143ea11ba Mon Sep 17 00:00:00 2001
From: RoboHeart 
Date: Fri, 30 Sep 2022 13:39:42 +0200
Subject: [PATCH 8/9] [UPD] Readme fragments
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

• Add contributor: RoboHeart
• Remove 'Upgrading' section from USAGE.rst

[ADD] Missing setup files

[UPD] Documentation files

by oca-gen-addon-readme
---
 .../odoo/addons/web_widget_mermaid            |  1 +
 setup/web_widget_mermaid/setup.py             |  6 ++
 web_widget_mermaid/README.rst                 | 53 ++++--------
 web_widget_mermaid/readme/CONTRIBUTORS.rst    |  1 +
 web_widget_mermaid/readme/USAGE.rst           | 27 ------
 .../static/description/index.html             | 85 ++++++-------------
 6 files changed, 49 insertions(+), 124 deletions(-)
 create mode 100644 setup/web_widget_mermaid/odoo/addons/web_widget_mermaid
 create mode 100644 setup/web_widget_mermaid/setup.py

diff --git a/setup/web_widget_mermaid/odoo/addons/web_widget_mermaid b/setup/web_widget_mermaid/odoo/addons/web_widget_mermaid
new file mode 100644
index 000000000000..a2901cf10202
--- /dev/null
+++ b/setup/web_widget_mermaid/odoo/addons/web_widget_mermaid
@@ -0,0 +1 @@
+..\\..\\..\\..\\web_widget_mermaid
\ No newline at end of file
diff --git a/setup/web_widget_mermaid/setup.py b/setup/web_widget_mermaid/setup.py
new file mode 100644
index 000000000000..28c57bb64031
--- /dev/null
+++ b/setup/web_widget_mermaid/setup.py
@@ -0,0 +1,6 @@
+import setuptools
+
+setuptools.setup(
+    setup_requires=['setuptools-odoo'],
+    odoo_addon=True,
+)
diff --git a/web_widget_mermaid/README.rst b/web_widget_mermaid/README.rst
index 82f2dd299aa8..8f0e9cdda8c3 100644
--- a/web_widget_mermaid/README.rst
+++ b/web_widget_mermaid/README.rst
@@ -2,10 +2,13 @@
 Mermaid flowchart widget
 ========================
 
-.. !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+.. 
+   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
    !! This file is generated by oca-gen-addon-readme !!
    !! changes will be overwritten.                   !!
    !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+   !! source digest: sha256:136879c1f5cb11ecd5f2466b0b12748e10fa17e1a95bd0bc9296316444760a86
+   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
 
 .. |badge1| image:: https://img.shields.io/badge/maturity-Beta-yellow.png
     :target: https://odoo-community.org/page/development-status
@@ -14,16 +17,16 @@ Mermaid flowchart widget
     :target: http://www.gnu.org/licenses/agpl-3.0-standalone.html
     :alt: License: AGPL-3
 .. |badge3| image:: https://img.shields.io/badge/github-OCA%2Fweb-lightgray.png?logo=github
-    :target: https://github.com/OCA/web/tree/12.0/web_widget_mermaid
+    :target: https://github.com/OCA/web/tree/15.0/web_widget_mermaid
     :alt: OCA/web
 .. |badge4| image:: https://img.shields.io/badge/weblate-Translate%20me-F47D42.png
-    :target: https://translation.odoo-community.org/projects/web-12-0/web-12-0-web_widget_mermaid
+    :target: https://translation.odoo-community.org/projects/web-15-0/web-15-0-web_widget_mermaid
     :alt: Translate me on Weblate
-.. |badge5| image:: https://img.shields.io/badge/runbot-Try%20me-875A7B.png
-    :target: https://runbot.odoo-community.org/runbot/162/12.0
-    :alt: Try me on Runbot
+.. |badge5| image:: https://img.shields.io/badge/runboat-Try%20me-875A7B.png
+    :target: https://runboat.odoo-community.org/builds?repo=OCA/web&target_branch=15.0
+    :alt: Try me on Runboat
 
-|badge1| |badge2| |badge3| |badge4| |badge5| 
+|badge1| |badge2| |badge3| |badge4| |badge5|
 
 This module adds a basic widget for rendering text fields as flowcharts using
 `mermaid `_.
@@ -60,7 +63,7 @@ As an example, this text::
 
 Produces this flowchart:
 
-.. image:: https://raw.githubusercontent.com/OCA/web/12.0/web_widget_mermaid/static/description/flowchart_example.png
+.. image:: https://raw.githubusercontent.com/OCA/web/15.0/web_widget_mermaid/static/description/flowchart_example.png
     :alt: Flowchart
 
 Demonstration
@@ -68,40 +71,13 @@ 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 smashing it by providing a detailed and welcomed
-`feedback `_.
+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.
 
@@ -117,6 +93,7 @@ Contributors
 ~~~~~~~~~~~~
 
 * Jan Verbeek 
+* RoboHeart 
 
 Maintainers
 ~~~~~~~~~~~
@@ -131,6 +108,6 @@ 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.
+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.
diff --git a/web_widget_mermaid/readme/CONTRIBUTORS.rst b/web_widget_mermaid/readme/CONTRIBUTORS.rst
index 672a6cc5afbb..b9f16837caee 100644
--- a/web_widget_mermaid/readme/CONTRIBUTORS.rst
+++ b/web_widget_mermaid/readme/CONTRIBUTORS.rst
@@ -1 +1,2 @@
 * Jan Verbeek 
+* RoboHeart 
diff --git a/web_widget_mermaid/readme/USAGE.rst b/web_widget_mermaid/readme/USAGE.rst
index 4dff90c1b562..b07c3dd79e78 100644
--- a/web_widget_mermaid/readme/USAGE.rst
+++ b/web_widget_mermaid/readme/USAGE.rst
@@ -29,30 +29,3 @@ 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.
diff --git a/web_widget_mermaid/static/description/index.html b/web_widget_mermaid/static/description/index.html
index cb9f640b4dc0..11f4e664cd1d 100644
--- a/web_widget_mermaid/static/description/index.html
+++ b/web_widget_mermaid/static/description/index.html
@@ -1,20 +1,20 @@
-
+
 
 
 
 
-
+
 Mermaid flowchart widget