From d20bda9ea4063b5eaecef97a0e3eda811144eed9 Mon Sep 17 00:00:00 2001
From: HemanginiPatel <h.patel.serpentcs@gmail.com>
Date: Mon, 7 Jun 2021 16:20:09 +0530
Subject: [PATCH] [IMP]Updated code.

---
 web_widget_mermaid/__manifest__.py            |   2 +-
 .../demo/res_users_flowchart.xml              |   2 +-
 .../static/src/js/web_widget_mermaid.js       |  47 +-
 .../web_widget_mermaid_default_theme.scss     | 461 +++++++++++-------
 .../view/web_widget_mermaid_view.xml          |  24 +-
 5 files changed, 314 insertions(+), 222 deletions(-)

diff --git a/web_widget_mermaid/__manifest__.py b/web_widget_mermaid/__manifest__.py
index 8730c593f..a16b3b2e3 100644
--- a/web_widget_mermaid/__manifest__.py
+++ b/web_widget_mermaid/__manifest__.py
@@ -9,7 +9,7 @@
     "license": "AGPL-3",
     "summary": "Render mermaid markdown flowcharts",
     "website": "https://github.com/OCA/web",
-    "depends": ['web'],
+    "depends": ["web"],
     "data": [
         "view/web_widget_mermaid_view.xml",
     ],
diff --git a/web_widget_mermaid/demo/res_users_flowchart.xml b/web_widget_mermaid/demo/res_users_flowchart.xml
index 0322d81f1..8ca3a78ad 100644
--- a/web_widget_mermaid/demo/res_users_flowchart.xml
+++ b/web_widget_mermaid/demo/res_users_flowchart.xml
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="UTF-8"?>
+<?xml version="1.0" encoding="UTF-8" ?>
 <odoo>
     <record id="res_users_flowchart" model="ir.model.fields">
         <field name="name">x_flowchart</field>
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 447851d51..2a5c6d494 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";
 
-    var core = require('web.core');
-    var basic_fields = require('web.basic_fields');
-    var field_registry = require('web.field_registry');
+    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
@@ -15,15 +15,15 @@ odoo.define('web.web_widget_mermaid', function(require) {
     // 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
+        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',
+            curve: "linear",
         },
 
         sequence: {
@@ -51,29 +51,24 @@ odoo.define('web.web_widget_mermaid', function(require) {
             leftPadding: 75,
             gridLineStartPadding: 35,
             fontSize: 11,
-            fontFamily: '"Lucida Grande", Helvetica, Verdana, Arial, '
-                        + 'sans-serif',  // Match Odoo's font choices
+            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() {
+        init: function () {
             this._super.apply(this, arguments);
-            this.chartId = _.uniqueId('mermaid_chart_');
+            this.chartId = _.uniqueId("mermaid_chart_");
         },
-        className: 'o_form_field_mermaid',
-        _renderReadonly: function() {
+        className: "o_form_field_mermaid",
+        _renderReadonly: function () {
             if (!this.value) {
                 return;
             }
-            var config = _.extend(
-                {},
-                defaultConfig,
-                this.attrs.options
-            );
+            var config = _.extend({}, defaultConfig, this.attrs.options);
             mermaid.mermaidAPI.initialize(config);
             try {
                 mermaid.mermaidAPI.render(
@@ -82,21 +77,21 @@ odoo.define('web.web_widget_mermaid', function(require) {
                     this.$el.html.bind(this.$el)
                 );
             } catch (e) {
-                this.$el.html($('<pre/>').text(e.message || e.str));
+                this.$el.html($("<pre/>").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 {
                 mermaid.parse(value);
             } catch (e) {
-                this.errorMessage = $('<pre/>').text(e.message || e.str);
+                this.errorMessage = $("<pre/>").text(e.message || e.str);
                 this.$el.after(this.errorMessage);
                 throw e;
             }
@@ -104,7 +99,7 @@ odoo.define('web.web_widget_mermaid', function(require) {
         },
     });
 
-    field_registry.add('mermaid', MermaidField);
+    field_registry.add("mermaid", MermaidField);
 
     return {
         MermaidField: MermaidField,
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
index 1f9aab945..1e9896b04 100644
--- 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
@@ -1,408 +1,491 @@
 .o_form_field_mermaid .label {
-  font-size: inherit;
-  font-weight: inherit;
-  line-height: inherit;
-  text-align: inherit;
-  color: inherit;
+    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; }
+    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; }
+    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; }
+    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; }
+    fill: $o-brand-primary;
+    stroke: $o-brand-primary;
+    stroke-width: 1px;
+}
 
 .o_form_field_mermaid .node.clickable {
-  cursor: pointer; }
+    cursor: pointer;
+}
 
 .o_form_field_mermaid .arrowheadPath {
-  fill: $o-main-text-color; }
+    fill: $o-main-text-color;
+}
 
 .o_form_field_mermaid .edgePath .path {
-  stroke: $o-main-text-color;
-  stroke-width: 1.5px; }
+    stroke: $o-main-text-color;
+    stroke-width: 1.5px;
+}
 
 .o_form_field_mermaid .edgeLabel {
-  background-color: #e8e8e8; }
+    background-color: #e8e8e8;
+}
 
 .o_form_field_mermaid .cluster rect {
-  fill: $o-brand-secondary;
-  stroke: $o-main-color-muted;
-  stroke-width: 1px; }
+    fill: $o-brand-secondary;
+    stroke: $o-main-color-muted;
+    stroke-width: 1px;
+}
 
 .o_form_field_mermaid .cluster text {
-  fill: $o-main-text-color; }
+    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; }
+    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; }
+    stroke: $o-brand-primary;
+    fill: $o-brand-primary;
+}
 
 .o_form_field_mermaid text.actor {
-  fill: white;
-  stroke: none; }
+    fill: white;
+    stroke: none;
+}
 
 .o_form_field_mermaid .actor-line {
-  stroke: grey; }
+    stroke: grey;
+}
 
 .o_form_field_mermaid .messageLine0 {
-  stroke-width: 1.5;
-  stroke-dasharray: '2 2';
-  stroke: $o-main-text-color; }
+    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; }
+    stroke-width: 1.5;
+    stroke-dasharray: "2 2";
+    stroke: $o-main-text-color;
+}
 
 .o_form_field_mermaid #arrowhead {
-  fill: $o-main-text-color; }
+    fill: $o-main-text-color;
+}
 
 .o_form_field_mermaid .sequenceNumber {
-  fill: white; }
+    fill: white;
+}
 
 .o_form_field_mermaid #sequencenumber {
-  fill: $o-main-text-color; }
+    fill: $o-main-text-color;
+}
 
 .o_form_field_mermaid #crosshead path {
-  fill: $o-main-text-color !important;
-  stroke: $o-main-text-color !important; }
+    fill: $o-main-text-color !important;
+    stroke: $o-main-text-color !important;
+}
 
 .o_form_field_mermaid .messageText {
-  fill: $o-main-text-color;
-  stroke: none; }
+    fill: $o-main-text-color;
+    stroke: none;
+}
 
 .o_form_field_mermaid .labelBox {
-  stroke: $o-brand-primary;
-  fill: $o-brand-primary; }
+    stroke: $o-brand-primary;
+    fill: $o-brand-primary;
+}
 
 .o_form_field_mermaid .labelText {
-  fill: white;
-  stroke: none; }
+    fill: white;
+    stroke: none;
+}
 
 .o_form_field_mermaid .loopText {
-  fill: white;
-  stroke: none; }
+    fill: white;
+    stroke: none;
+}
 
 .o_form_field_mermaid .loopLine {
-  stroke-width: 2;
-  stroke-dasharray: '2 2';
-  stroke: $o-brand-primary; }
+    stroke-width: 2;
+    stroke-dasharray: "2 2";
+    stroke: $o-brand-primary;
+}
 
 .o_form_field_mermaid .note {
-  stroke: $o-main-color-muted;
-  fill: #fff5ad; }
+    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; }
+    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; }
+    fill: #f4f4f4;
+    stroke: #666;
+}
 
 .o_form_field_mermaid .activation1 {
-  fill: #f4f4f4;
-  stroke: #666; }
+    fill: #f4f4f4;
+    stroke: #666;
+}
 
 .o_form_field_mermaid .activation2 {
-  fill: #f4f4f4;
-  stroke: #666; }
+    fill: #f4f4f4;
+    stroke: #666;
+}
 
 /** Section styling */
 .o_form_field_mermaid .section {
-  stroke: none;
-  opacity: 0.2; }
+    stroke: none;
+    opacity: 0.2;
+}
 
 .o_form_field_mermaid .section0 {
-  fill: rgba(102, 102, 255, 0.49); }
+    fill: rgba(102, 102, 255, 0.49);
+}
 
 .o_form_field_mermaid .section2 {
-  fill: #fff400; }
+    fill: #fff400;
+}
 
 .o_form_field_mermaid .section1,
 .o_form_field_mermaid .section3 {
-  fill: white;
-  opacity: 0.2; }
+    fill: white;
+    opacity: 0.2;
+}
 
 .o_form_field_mermaid .sectionTitle0 {
-  fill: $o-main-text-color; }
+    fill: $o-main-text-color;
+}
 
 .o_form_field_mermaid .sectionTitle1 {
-  fill: $o-main-text-color; }
+    fill: $o-main-text-color;
+}
 
 .o_form_field_mermaid .sectionTitle2 {
-  fill: $o-main-text-color; }
+    fill: $o-main-text-color;
+}
 
 .o_form_field_mermaid .sectionTitle3 {
-  fill: $o-main-text-color; }
+    fill: $o-main-text-color;
+}
 
 .o_form_field_mermaid .sectionTitle {
-  text-anchor: start;
-  font-size: 11px;
-  text-height: 14px; }
+    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; }
+    stroke: lightgrey;
+    opacity: 0.3;
+    shape-rendering: crispEdges;
+}
 
 .o_form_field_mermaid .grid path {
-  stroke-width: 0; }
+    stroke-width: 0;
+}
 
 /* Today line */
 .o_form_field_mermaid .today {
-  fill: none;
-  stroke: red;
-  stroke-width: 2px; }
+    fill: none;
+    stroke: red;
+    stroke-width: 2px;
+}
 
 /* Task styling */
 /* Default task */
 .o_form_field_mermaid .task {
-  stroke-width: 2; }
+    stroke-width: 2;
+}
 
 .o_form_field_mermaid .taskText {
-  text-anchor: middle;
-  font-size: 11px; }
+    text-anchor: middle;
+    font-size: 11px;
+}
 
 .o_form_field_mermaid .taskTextOutsideRight {
-  fill: $o-main-text-color;
-  text-anchor: start;
-  font-size: 11px; }
+    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; }
+    fill: $o-main-text-color;
+    text-anchor: end;
+    font-size: 11px;
+}
 
 /* Special case clickable */
 .o_form_field_mermaid .task.clickable {
-  cursor: pointer; }
+    cursor: pointer;
+}
 
 .o_form_field_mermaid .taskText.clickable {
-  cursor: pointer;
-  fill: #003163 !important;
-  font-weight: bold; }
+    cursor: pointer;
+    fill: #003163 !important;
+    font-weight: bold;
+}
 
 .o_form_field_mermaid .taskTextOutsideLeft.clickable {
-  cursor: pointer;
-  fill: #003163 !important;
-  font-weight: bold; }
+    cursor: pointer;
+    fill: #003163 !important;
+    font-weight: bold;
+}
 
 .o_form_field_mermaid .taskTextOutsideRight.clickable {
-  cursor: pointer;
-  fill: #003163 !important;
-  font-weight: bold; }
+    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; }
+    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; }
+    fill: $o-brand-primary;
+    stroke: $o-brand-primary;
+}
 
 .o_form_field_mermaid .taskTextOutside0,
 .o_form_field_mermaid .taskTextOutside2 {
-  fill: $o-main-text-color; }
+    fill: $o-main-text-color;
+}
 
 .o_form_field_mermaid .taskTextOutside1,
 .o_form_field_mermaid .taskTextOutside3 {
-  fill: $o-main-text-color; }
+    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; }
+    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; }
+    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; }
+    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; }
+    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; }
+    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; }
+    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; }
+    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); }
+    transform: rotate(45deg) scale(0.8, 0.8);
+}
 
 .o_form_field_mermaid .milestoneText {
-  font-style: italic; }
+    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; }
+    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; }
+    fill: $o-main-text-color !important;
+}
 
 .o_form_field_mermaid .titleText {
-  text-anchor: middle;
-  font-size: 18px;
-  fill: $o-main-text-color; }
+    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; }
+    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; }
+    fill: $o-brand-primary;
+    stroke: $o-main-text-color;
+}
 
 .o_form_field_mermaid g.classGroup line {
-  stroke: $o-main-text-color;
-  stroke-width: 1; }
+    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; }
+    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; }
+    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; }
+    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; }
+    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; }
+    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; }
+    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; }
+    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; }
+    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; }
+    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; }
+    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; }
+    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; }
+    fill: lightgrey;
+    color: $o-main-text-color;
+}
 
 .o_form_field_mermaid .node-label p {
-  margin-top: 9px; }
+    margin-top: 9px;
+}
 
 .o_form_field_mermaid .pieTitleText {
-  text-anchor: middle;
-  font-size: 25px;
-  fill: $o-main-text-color; }
+    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
index 0f2a67293..f6f69b89b 100644
--- a/web_widget_mermaid/view/web_widget_mermaid_view.xml
+++ b/web_widget_mermaid/view/web_widget_mermaid_view.xml
@@ -1,10 +1,24 @@
-<?xml version="1.0" encoding="UTF-8"?>
+<?xml version="1.0" encoding="UTF-8" ?>
 <odoo>
-    <template id="assets_backend" name="web_widget_mermaid assets" inherit_id="web.assets_backend">
+    <template
+        id="assets_backend"
+        name="web_widget_mermaid assets"
+        inherit_id="web.assets_backend"
+    >
         <xpath expr="." position="inside">
-            <script type="text/javascript" src="/web_widget_mermaid/static/lib/mermaid/mermaid.js"></script>
-            <script type="text/javascript" src="/web_widget_mermaid/static/src/js/web_widget_mermaid.js"></script>
-            <link rel="stylesheet" type="text/scss" href="/web_widget_mermaid/static/src/scss/web_widget_mermaid_default_theme.scss"/>
+            <script
+                type="text/javascript"
+                src="/web_widget_mermaid/static/lib/mermaid/mermaid.js"
+            />
+            <script
+                type="text/javascript"
+                src="/web_widget_mermaid/static/src/js/web_widget_mermaid.js"
+            />
+            <link
+                rel="stylesheet"
+                type="text/scss"
+                href="/web_widget_mermaid/static/src/scss/web_widget_mermaid_default_theme.scss"
+            />
         </xpath>
     </template>
 </odoo>