Remove "Edit this page"

2025-10-08 00:29:39 +02:00 · 2022-09-03 12:21:42 +05:30
parent 0a3042322f
commit 42a2cabc7b
20 changed files with 881 additions and 879 deletions
--- a/docs/usage.md
+++ b/docs/usage.md
@@ -1,8 +1,6 @@
 # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
 # Usage

-**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/usage.md)
-
 Mermaid is a JavaScript tool that makes use of a Markdown based syntax to render customizable diagrams, charts and visualizations.

 Diagrams can be re-rendered/modified by modifying their descriptions.
@@ -43,24 +41,22 @@ We have compiled some Video [Tutorials](./Tutorials.md) on how to use the mermai
 The easiest way to integrate mermaid on a web page requires three elements:

 1.  Inclusion of the mermaid address in the html page using a `script` tag, in the `src` section.Example:
+
    ```html
    <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
    ```

 2.  The `mermaidAPI` call, in a separate `script` tag. Example:
+
    ```html
-    <script>mermaid.initialize({startOnLoad:true});
+    <script>
+        mermaid.initialize({ startOnLoad: true });
    </script>
    ```

 3.  A graph definition, inside `<div>` tags labeled `class=mermaid`. Example:
    ```html
-    <div class="mermaid">
-         graph LR
-          A --- B
-          B-->C[fa:fa-ban forbidden]
-          B-->D(fa:fa-spinner);
-    </div>
+    <div class="mermaid">graph LR A --- B B-->C[fa:fa-ban forbidden] B-->D(fa:fa-spinner);</div>
    ```

 **Following these directions, mermaid starts at page load and (when the page has loaded) it will
@@ -71,20 +67,16 @@ locate the graph definitions inside the `div` tags with `class="mermaid"` and re
 ```html
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="utf-8">
-</head>
-<body>
-  <div class="mermaid">
-  graph LR
-      A --- B
-      B-->C[fa:fa-ban forbidden]
-      B-->D(fa:fa-spinner);
-  </div>
- <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
- <script>mermaid.initialize({startOnLoad:true});
-</script>
-</body>
+    <head>
+        <meta charset="utf-8" />
+    </head>
+    <body>
+        <div class="mermaid">graph LR A --- B B-->C[fa:fa-ban forbidden] B-->D(fa:fa-spinner);</div>
+        <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
+        <script>
+            mermaid.initialize({ startOnLoad: true });
+        </script>
+    </body>
 </html>
 ```

@@ -104,8 +96,8 @@ A `securityLevel` configuration has to first be cleared, `securityLevel` sets th

 ## securityLevel

-| Parameter     | Description                       | Type   | Required | Values                    |
-| ------------- | --------------------------------- | ------ | -------- | ------------------------- |
+| Parameter     | Description                       | Type   | Required | Values                                     |
+| ------------- | --------------------------------- | ------ | -------- | ------------------------------------------ |
 | securityLevel | Level of trust for parsed diagram | String | Required | 'sandbox', 'strict', 'loose', 'antiscript' |

 Values:
@@ -117,7 +109,7 @@ Values:

 ```note
 This changes the default behaviour of mermaid so that after upgrade to 8.2, unless the `securityLevel` is not changed, tags in flowcharts are encoded as tags and clicking is disabled.
-**sandbox** security level is still in the beta version. 
+**sandbox** security level is still in the beta version.
 ```

 **If you are taking responsibility for the diagram source security you can set the `securityLevel` to a value of your choosing . This allows clicks and tags are allowed.**
@@ -126,7 +118,7 @@ This changes the default behaviour of mermaid so that after upgrade to 8.2, unle

 ```javascript
 mermaidAPI.initialize({
-    securityLevel: 'loose'
+    securityLevel: 'loose',
 });
 ```

@@ -136,7 +128,7 @@ If you use dynamically loaded fonts that are loaded through CSS, such as Google
 whole page to load (dom + assets, particularly the fonts file).

 ```javascript
-$(document).load(function() {
+$(document).load(function () {
    mermaid.initialize();
 });
 ```
@@ -144,7 +136,7 @@ $(document).load(function() {
 or

 ```javascript
-$(document).ready(function() {
+$(document).ready(function () {
    mermaid.initialize();
 });
 ```
@@ -174,13 +166,13 @@ finer-grained control of this behavior, you can call `init` yourself with:
 Example:

 ```javascript
-mermaid.init({noteMargin: 10}, ".someOtherClass");
+mermaid.init({ noteMargin: 10 }, '.someOtherClass');
 ```

 Or with no config object, and a jQuery selection:

 ```javascript
-mermaid.init(undefined, $("#someId .yetAnotherClass"));
+mermaid.init(undefined, $('#someId .yetAnotherClass'));
 ```

 ```warning
@@ -203,10 +195,16 @@ The example below show an outline of how this could be used. The example just lo
 <script src="mermaid.js"></script>

 <script>
-    mermaid.mermaidAPI.initialize({ startOnLoad:false }); $(function(){ // Example of using the API var
-element = document.querySelector("#graphDiv"); var insertSvg = function(svgCode, bindFunctions){
-    element.innerHTML = svgCode; }; var graphDefinition = 'graph TB\na-->b'; var graph =
-mermaid.mermaidAPI.render('graphDiv', graphDefinition, insertSvg); });
+    mermaid.mermaidAPI.initialize({ startOnLoad: false });
+    $(function () {
+        // Example of using the API var
+        element = document.querySelector('#graphDiv');
+        var insertSvg = function (svgCode, bindFunctions) {
+            element.innerHTML = svgCode;
+        };
+        var graphDefinition = 'graph TB\na-->b';
+        var graph = mermaid.mermaidAPI.render('graphDiv', graphDefinition, insertSvg);
+    });
 </script>
 ```

@@ -219,9 +217,9 @@ The example code below is an extract of what mermaid does when using the API. Th
 bind events to an SVG when using the API for rendering.

 ```javascript
-var insertSvg = function(svgCode, bindFunctions) {
+var insertSvg = function (svgCode, bindFunctions) {
    element.innerHTML = svgCode;
-    if(typeof callback !== 'undefined'){
+    if (typeof callback !== 'undefined') {
        callback(id);
    }
    bindFunctions(element);
@@ -229,8 +227,7 @@ var insertSvg = function(svgCode, bindFunctions) {

 var id = 'theGraph';

-
-mermaidAPI.render(id,txt,insertSvg, element);
+mermaidAPI.render(id, txt, insertSvg, element);
 ```

 1.  The graph is generated using the render call.
@@ -246,11 +243,10 @@ This is the renderer used for transforming the documentation from Markdown to ht
 ```javascript
 var renderer = new marked.Renderer();
 renderer.code = function (code, language) {
-    if(code.match(/^sequenceDiagram/)||code.match(/^graph/)){
-        return '<div class="mermaid">'+code+'</div>';
-    }
-    else{
-        return '<pre><code>'+code+'</code></pre>';
+    if (code.match(/^sequenceDiagram/) || code.match(/^graph/)) {
+        return '<div class="mermaid">' + code + '</div>';
+    } else {
+        return '<pre><code>' + code + '</code></pre>';
    }
 };
 ```
@@ -292,15 +288,15 @@ function in order to handle the error in an application-specific way.
 The code-example below in meta code illustrates how this could work:

 ```javascript
-mermaid.parseError = function(err,hash){
+mermaid.parseError = function (err, hash) {
    displayErrorInGui(err);
 };

-var textFieldUpdated = function(){
+var textFieldUpdated = function () {
    var textStr = getTextFromFormField('code');

-    if(mermaid.parse(textStr)){
-        reRender(textStr)
+    if (mermaid.parse(textStr)) {
+        reRender(textStr);
    }
 };

@@ -331,7 +327,7 @@ on what kind of integration you use.
 ```html
 <script src="../dist/mermaid.js"></script>
 <script>
-    var config = { startOnLoad:true, flowchart:{ useMaxWidth:false, htmlLabels:true } };
+    var config = { startOnLoad: true, flowchart: { useMaxWidth: false, htmlLabels: true } };
    mermaid.initialize(config);
 </script>
 ```