Render function as mentioned in issue #146, only works in browser context

Updated build scripts New way for bundling content in dist, tobe tested, currently to be considered beta
2025-09-22 08:50:13 +02:00 · 2015-05-26 20:41:53 +02:00
parent 05f3982632
commit b4a96c9b21
35 changed files with 104559 additions and 15040 deletions
--- a/test/web_render.html
+++ b/test/web_render.html
@@ -0,0 +1,130 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+
+    <link rel="stylesheet" href="../dist/mermaid.forest.css"/>
+
+<script src="../node_modules/d3/d3.js"></script>
+  <script src="../dist/mermaid.slim.js"></script>
+  <scrpt src="../dist/mermaid.full.js"></scrpt>
+  <style type="text/css">
+html {
+  font-family: 'trebuchet ms', verdana, arial;
+  color: #333333;
+}
+  </style>
+    <script>
+    //browserify --entry src/mermaid.js -u d3 -o ./dist/mermaid.brow.slim.js
+        var mermaid_config = {
+            startOnLoad:true
+        }
+        mermaid.ganttConfig = {
+            titleTopMargin:25,
+            barHeight:20,
+            barGap:4,
+            topPadding:50,
+            sidePadding:75,
+            gridLineStartPadding:35,
+            fontSize:11,
+            numberSectionStyles:3,
+            axisFormatter: [
+                // Within a day
+                ["%I:%M", function (d) {
+                    return d.getHours();
+                }],
+                // Monday a week
+                ["w. %U", function (d) {
+                    return d.getDay() == 1;
+                }],
+                // Day within a week (not monday)
+                ["%a %d", function (d) {
+                    return d.getDay() && d.getDate() != 1;
+                }],
+                // within a month
+                ["%b %d", function (d) {
+                    return d.getDate() != 1;
+                }],
+                // Month
+                ["%m-%y", function (d) {
+                    return d.getMonth();
+                }]
+            ]
+        };
+    </script>
+    <script>
+        function apa(){
+            console.log('CLICKED');
+        }
+    </script>
+    <lnk rel="stylesheet" href="seq.css"/>
+</head>
+    <body>
+
+    <div  class="mermaid" id="i141">
+        graph TB
+            subgraph LevelAB1ss
+                subgraph LevelAB1C1
+                    d1-->d2
+                end
+                subgraph X
+                    x-->x2
+                end
+            end
+    </div>
+    <div class="mermaid">
+        graph TB
+        subgraph A
+            subgraph AA
+                aa1 --> aa2
+                aa1 --> aa3
+                subgraph New top
+                    nt1 --> nt2
+                    nt1 --> nt3
+                end
+            end
+            subgraph AB
+                ab1 --> ab2
+                ab1 --> ab3
+            end
+        end
+    </div>
+    <div class="mermaid">
+        sequenceDiagram
+            A->> B: Query
+            B->> C: Forward query
+            Note right of C: Thinking...
+            C->> B: Response
+            B->> A: Forward response
+
+    </div>
+
+    <div class="mermaid">
+        graph TB
+            ab1 -- tjojho --> ab3
+    </div>
+        <div class="mermaid">
+gantt
+    dateFormat yyyy-mm-dd
+    title Adding gantt diagram functionality to mermaid
+
+    section Design
+        Design jison grammar            :des1, 2014-01-01, 2014-01-04
+        Create example text             :des2, 2014-01-01, 3d
+        Bounce gantt example with users :des3, after des2, 5d
+
+    section Implementation
+        update build script             :2014-01-02,1h
+        Implement parser and jison      :after des1, 2d
+        Create tests for parser         :3d
+        Create renderer                 :5d
+        Create tests for renderer       :2d
+        Add to mermaid core             :1d
+
+    section Documentation
+        Describe gantt syntax               :a1, 2014-01-01, 3d
+        Add gantt diagram to demo page      :after a1  , 2h
+        Add gantt to diagram to demo page   :after a1  , 2h    </div>
+  
+    </body>
+</html>