doc for mermaid

README.md

@@ -25,6 +25,7 @@
         - [Column Formatter](#column-formatter)
         - [Searchable Fields](#searchable-fields)
     * [Custom Fields in Comments](#custom-fields-in-comments)
+        - [Create Diagrams and Visualizations with Mermaid](#create-diagrams-and-visualizations-with-mermaid)
     * [Custom Data Visitor](#custom-data-visitor)
         - [Collect Data from the Title](#collect-data-from-the-title)
         - [Collect Data from the Annotations](#collect-data-from-the-annotations)
@@ -402,6 +403,46 @@ test.beforeEach(() => {
 });
 ```
 
+#### Create Diagrams and Visualizations with [Mermaid](https://mermaid.js.org/)
+- Enable Mermaid 
+```js
+// playwright.config.js
+module.exports = {
+     reporter: [
+        ['monocart-reporter', {  
+            name: "My Test Report",
+            outputFile: './test-results/report.html',
+            mermaid: {
+                // mermaid script url, using mermaid CDN: https://www.jsdelivr.com/package/npm/mermaid
+                scriptSrc: 'https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js',
+                // mermaid config: https://mermaid.js.org/config/schema-docs/config.html
+                config: {
+                    startOnLoad: false
+                }
+            }
+        }]
+    ]
+};
+```
+- Write Mermaid code in markdown:
+````js
+/**
+ * @description Sequence diagram for Monocart Reporter
+```mermaid
+flowchart LR
+
+A[Hard] -->|Text| B(Round)
+B --> C{Decision}
+C -->|One| D[Result 1]
+C -->|Two| E[Result 2]
+```
+*/
+test('case description', () => {
+
+});
+````
+
+
 ### Custom Data Visitor
 The `visitor` function will be executed for each row item (suite, case and step). Arguments:
 - `data` data item (suite/case/step) for reporter, you can rewrite some of its properties or add more

packages/app/src/components/detail/detail.vue

@@ -807,4 +807,11 @@ const onFocus = (e) => {
     }
 }
 
+.markdown-body {
+    margin: 0;
+
+    .mermaid {
+        margin: 0;
+    }
+}
 </style>

tests/example/example.spec.js

@@ -1,11 +1,11 @@
 /**
  * add extra information for file
  * @owner FO
- * @description ## Gantt diagram for Monocart Reporter
+ * @description
 ```mermaid
 gantt
 dateFormat  YYYY-MM-DD
-title Adding GANTT diagram to mermaid
+title Gantt diagram for Monocart Reporter
 excludes weekdays 2014-01-10
 section A section
 Completed task            :done,    des1, 2014-01-06,2014-01-08
@@ -222,7 +222,7 @@ test.describe('parent group', () => {
         });
 
         /**
-         * @description ## Sequence diagram for Monocart Reporter
+         * @description Sequence diagram for Monocart Reporter
 ```mermaid
 flowchart LR
 

tests/playwright.config.js

@@ -98,7 +98,7 @@ module.exports = {
 
             mermaid: {
                 scriptSrc: 'https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js',
-                // mermaid config https://mermaid.js.org/config/schema-docs/config.html
+                // mermaid config: https://mermaid.js.org/config/schema-docs/config.html
                 config: {
                     startOnLoad: false
                 }