mermaid/test/web.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">

    <script src="../dist/mermaid.full.js"></script>
    <scrpt src="https://cdn.rawgit.com/knsv/mermaid/0.3.0/dist/mermaid.full.min.js"></scrpt>
    <script>
        var mermaid_config = {
            startOnLoad:true
        }
        mermaid.startOnLoad=true;
    </script>
    <script>
        function apa(){
            console.log('CLICKED');
        }
    </script>
</head>
    <body>
    <h1>Shapes</h1>
    Shape examples:
    <pre>
        graph TD;
            sq[Square shape]-->ci((Circle shape));
            od>Odd shape]---|Two line &lt;br>edge comment|ro;
            od2>Really long text in an Odd shape]-->od3>Really long text with linebreak &lt;br>in an Odd shape];
            di{Diamond is  &lt;br> broken}-->ro(Rounded &lt;br>square &lt;br>shape);

            %% Comments after double percent signs
            di-->ro2(Rounded square shape);
            e((Inner circle))-->f(,.?!+-*ز);
            A[Object]-->B(Thing);
            style e red;
    </pre>
    <div class="mermaid">
    graph TD;
        A-->B;
        A-->C;
        A-->D;
        B-->D;
        A-->|Link text|B
    </div>
    <div class="mermaid">
        graph TD;
        sq[Square shape]-->ci((Circle shape));
        od>Odd shape]---|Two line<br>edge comment|ro;
        od2>Really long text in an Odd shape]-->od3>Really long text with linebreak<br>in an Odd shape];
        di{Diamond is <br/> broken}-->ro(Rounded<br>square<br>shape);
        di-->ro2(Rounded square shape);
        %% Comments after double percent signs
        e((Inner / circle))-->f(,.?!+-*ز);
        cyr[Cyrillic]-->cyr2((Circle shape Начало));
        A[Object foo,bar]-->B(Thing);
        style e red;
    </div>
    <div class="mermaid2">
        graph LR;
        A(Central Message Router);
        B(R TD);
        C(XYZ);
        D(S Writer);
        A-->|R TD Router|B;
        B-->C;
        C-->|XYZ Router|D;
    </div>

    <h1>Sequence diagrams (experimental)</h1>
    <pre>
        sequenceDiagram
        participant John the Long
        Alice->Bob: Hello Bob, how are you?
        Note left of Bob: Bob thinks
        Bob-->Alice: I am good thanks!
        Bob-->John the Long: How about you John?
        Note left of John the Long: Bob thinks
        Bob-->Alice: Checking with John...

        loop Multiple status checks
        loog Naging
        Alice->John the Long: Yes... John, how are you?
        end
        John the Long-->Alice: Better then you!
        end
    </pre>
    <div class="mermaid2">
        sequenceDiagram
        participant Alice
        Note left of Alice: Bob thinks about <br/> things <br/> to think about
    </div>
    <div class="mermaid">
        sequenceDiagram
        participant Alice
        participant Bob
        participant John
        Alice->>Bob: Hello Bob, how are you?
        Note left of Alice: Bob thinks about <br/> things <br/> to think about
        Bob-->>Alice: I am good thanks!
        loop Multiple status checks
        Bob--xJohn: How about you John?
        Note right of John: Bob thinks
        end

        Bob--xAlice: Checking with John...
        Alice->John the Long: Yes... John, how are you?
        John the Long-->Alice: Better then you!!

    </div>

    <div  class="mermaid">
graph LR;
                A[Start]-->B{a = '1,2'}
                B-->|True|C[test = 1]
                B-->|False|Z[Store]
                C-->D{condition};
                D-->|True|E[test = 2];
                D-->|False|F[test = 3];
                E-->G{condition2 = ''};
                F-->G;
                G-->|True|H[test = 4];
                G-->|False|I[test = 5];
                H-->J{condition3};
                I-->J;
                J-->|True|K[test = 6];
                J-->|False|L;
                K-->L[Print];
                L-->M[Any Action];
                M-->N[Any Other Action];
                N-->Z;

    </div>
    <h1>Dot syntax (experimental)</h1>
    <pre>
        digraph
        {
        a -> b -> c -- d -> e;
        a -- e;
        }
    </pre>
    <div class="mermaid2">
        digraph
        {
        a -> b -> c -- d -> e;
        a -- e;
        }
    </div>


    </body>
</html>
Adding missing files 2014-11-13 19:53:31 +01:00			`<!DOCTYPE html>`
			`<html>`
			`<head>`
Added shapes Added UTF-8 tag to test webpage Added tests for shapes on test webpage Added odd shape Added circle shape Modified diamond shape to always use right angles 2014-11-27 09:00:25 +01:00			`<meta charset="UTF-8">`
Adding missing files 2014-11-13 19:53:31 +01:00
Added check for previously processed div elements, fix for issue #29, thank to user madebits for fix. 2014-12-03 17:42:39 +01:00			`<script src="../dist/mermaid.full.js"></script>`
Support for different arrow types in sequence diagrams: no arrow head, cross head and regular arrow head. 2015-01-04 17:56:58 +01:00			`<scrpt src="https://cdn.rawgit.com/knsv/mermaid/0.3.0/dist/mermaid.full.min.js"></scrpt>`
Fix for br tags within nodes for new line 2014-11-25 22:58:57 +01:00			`<script>`
Using browserify for module management, updated build scripts mermaid_config can be used to config start on load. 2014-11-21 08:03:43 +01:00			`var mermaid_config = {`
Adde support for more characters in text like + , . = < > etc 2014-11-22 10:02:38 +01:00			`startOnLoad:true`
Using browserify for module management, updated build scripts mermaid_config can be used to config start on load. 2014-11-21 08:03:43 +01:00			`}`
Added the option to disable auto rendering via the mermaid namespace as described in issue #91 Added optional ; as statement separator equal to newline for sequence diagrams (help for tidy users) 2015-01-06 19:33:00 +01:00			`mermaid.startOnLoad=true;`
Fix for br tags within nodes for new line 2014-11-25 22:58:57 +01:00			`</script>`
Added support for click events on nodes 2014-11-24 22:03:32 +01:00			`<script>`
			`function apa(){`
			`console.log('CLICKED');`
			`}`
			`</script>`
Adding missing files 2014-11-13 19:53:31 +01:00			`</head>`
			`<body>`
Added shapes Added UTF-8 tag to test webpage Added tests for shapes on test webpage Added odd shape Added circle shape Modified diamond shape to always use right angles 2014-11-27 09:00:25 +01:00			`<h1>Shapes</h1>`
Adding experimental new grammars 2014-12-04 17:58:05 +01:00			`Shape examples:`
			`<pre>`
Added shapes Added UTF-8 tag to test webpage Added tests for shapes on test webpage Added odd shape Added circle shape Modified diamond shape to always use right angles 2014-11-27 09:00:25 +01:00			`graph TD;`
Updated shape syntax Coverage instrumentation in tests 2014-11-27 18:21:15 +01:00			`sq[Square shape]-->ci((Circle shape));`
Adding experimental new grammars 2014-12-04 17:58:05 +01:00			`od>Odd shape]---\|Two line <br>edge comment\|ro;`
			`od2>Really long text in an Odd shape]-->od3>Really long text with linebreak <br>in an Odd shape];`
			`di{Diamond is <br> broken}-->ro(Rounded <br>square <br>shape);`
* Support for comments pointed out in issue #47 2014-12-11 19:23:36 +01:00
			`%% Comments after double percent signs`
Updated shape syntax Coverage instrumentation in tests 2014-11-27 18:21:15 +01:00			`di-->ro2(Rounded square shape);`
Added support for more characters as described in issue #25 2014-12-03 18:34:18 +01:00			`e((Inner circle))-->f(,.?!+-*ز);`
Styling of sequence diagrams from css classes 2014-12-21 20:59:11 +01:00			`A[Object]-->B(Thing);`
Added shapes Added UTF-8 tag to test webpage Added tests for shapes on test webpage Added odd shape Added circle shape Modified diamond shape to always use right angles 2014-11-27 09:00:25 +01:00			`style e red;`
Adding experimental new grammars 2014-12-04 17:58:05 +01:00			`</pre>`
Support for different arrow types in sequence diagrams: no arrow head, cross head and regular arrow head. 2015-01-04 17:56:58 +01:00			`<div class="mermaid">`
			`graph TD;`
			`A-->B;`
			`A-->C;`
			`A-->D;`
			`B-->D;`
			`A-->\|Link text\|B`
			`</div>`
Adding experimental new grammars 2014-12-04 17:58:05 +01:00			`<div class="mermaid">`
			`graph TD;`
			`sq[Square shape]-->ci((Circle shape));`
			`od>Odd shape]---\|Two line<br>edge comment\|ro;`
			`od2>Really long text in an Odd shape]-->od3>Really long text with linebreak<br>in an Odd shape];`
			`di{Diamond is <br/> broken}-->ro(Rounded<br>square<br>shape);`
			`di-->ro2(Rounded square shape);`
* Support for comments pointed out in issue #47 2014-12-11 19:23:36 +01:00			`%% Comments after double percent signs`
Support for comments to the right of the Actor 2014-12-14 19:13:04 +01:00			`e((Inner / circle))-->f(,.?!+-*ز);`
Adding experimental new grammars 2014-12-04 17:58:05 +01:00			`cyr[Cyrillic]-->cyr2((Circle shape Начало));`
Styling of sequence diagrams from css classes 2014-12-21 20:59:11 +01:00			`A[Object foo,bar]-->B(Thing);`
Adding experimental new grammars 2014-12-04 17:58:05 +01:00			`style e red;`
Added shapes Added UTF-8 tag to test webpage Added tests for shapes on test webpage Added odd shape Added circle shape Modified diamond shape to always use right angles 2014-11-27 09:00:25 +01:00			`</div>`
Support for different arrow types in sequence diagrams: no arrow head, cross head and regular arrow head. 2015-01-04 17:56:58 +01:00			`<div class="mermaid2">`
Styling of sequence diagrams from css classes 2014-12-21 20:59:11 +01:00			`graph LR;`
			`A(Central Message Router);`
			`B(R TD);`
			`C(XYZ);`
			`D(S Writer);`
			`A-->\|R TD Router\|B;`
			`B-->C;`
			`C-->\|XYZ Router\|D;`
			`</div>`
Adde support for more characters in text like + , . = < > etc 2014-11-22 10:02:38 +01:00
Adding experimental new grammars 2014-12-04 17:58:05 +01:00			`<h1>Sequence diagrams (experimental)</h1>`
			`<pre>`
			`sequenceDiagram`
Styling of sequence diagrams from css classes 2014-12-21 20:59:11 +01:00			`participant John the Long`
Adding experimental new grammars 2014-12-04 17:58:05 +01:00			`Alice->Bob: Hello Bob, how are you?`
Styling of sequence diagrams from css classes 2014-12-21 20:59:11 +01:00			`Note left of Bob: Bob thinks`
Adding experimental new grammars 2014-12-04 17:58:05 +01:00			`Bob-->Alice: I am good thanks!`
			`Bob-->John the Long: How about you John?`
Styling of sequence diagrams from css classes 2014-12-21 20:59:11 +01:00			`Note left of John the Long: Bob thinks`
Adding experimental new grammars 2014-12-04 17:58:05 +01:00			`Bob-->Alice: Checking with John...`
Styling of sequence diagrams from css classes 2014-12-21 20:59:11 +01:00
			`loop Multiple status checks`
			`loog Naging`
Adding experimental new grammars 2014-12-04 17:58:05 +01:00			`Alice->John the Long: Yes... John, how are you?`
Styling of sequence diagrams from css classes 2014-12-21 20:59:11 +01:00			`end`
Adding experimental new grammars 2014-12-04 17:58:05 +01:00			`John the Long-->Alice: Better then you!`
Styling of sequence diagrams from css classes 2014-12-21 20:59:11 +01:00			`end`
Adding experimental new grammars 2014-12-04 17:58:05 +01:00			`</pre>`
Support for different arrow types in sequence diagrams: no arrow head, cross head and regular arrow head. 2015-01-04 17:56:58 +01:00			`<div class="mermaid2">`
Adding experimental new grammars 2014-12-04 17:58:05 +01:00			`sequenceDiagram`
Styling of sequence diagrams from css classes 2014-12-21 20:59:11 +01:00			`participant Alice`
			`Note left of Alice: Bob thinks about <br/> things <br/> to think about`
			`</div>`
			`<div class="mermaid">`
			`sequenceDiagram`
			`participant Alice`
			`participant Bob`
Support for different arrow types in sequence diagrams: no arrow head, cross head and regular arrow head. 2015-01-04 17:56:58 +01:00			`participant John`
			`Alice->>Bob: Hello Bob, how are you?`
Styling of sequence diagrams from css classes 2014-12-21 20:59:11 +01:00			`Note left of Alice: Bob thinks about <br/> things <br/> to think about`
Support for different arrow types in sequence diagrams: no arrow head, cross head and regular arrow head. 2015-01-04 17:56:58 +01:00			`Bob-->>Alice: I am good thanks!`
Styling of sequence diagrams from css classes 2014-12-21 20:59:11 +01:00			`loop Multiple status checks`
Support for different arrow types in sequence diagrams: no arrow head, cross head and regular arrow head. 2015-01-04 17:56:58 +01:00			`Bob--xJohn: How about you John?`
			`Note right of John: Bob thinks`
Styling of sequence diagrams from css classes 2014-12-21 20:59:11 +01:00			`end`
Adding support for loops to the sequence diagram grammar. 2014-12-16 20:51:48 +01:00
Support for different arrow types in sequence diagrams: no arrow head, cross head and regular arrow head. 2015-01-04 17:56:58 +01:00			`Bob--xAlice: Checking with John...`
Adding experimental new grammars 2014-12-04 17:58:05 +01:00			`Alice->John the Long: Yes... John, how are you?`
Support for different arrow types in sequence diagrams: no arrow head, cross head and regular arrow head. 2015-01-04 17:56:58 +01:00			`John the Long-->Alice: Better then you!!`

Adding experimental new grammars 2014-12-04 17:58:05 +01:00			`</div>`

Cleanup of sequence diagram rendering code (still experimental) Better handling of width. Instead uf using width 100% the width is set to the width of the graph. Should help issue #19. 2014-12-05 10:19:07 +01:00			`<div class="mermaid">`
			`graph LR;`
Adding support for loops to the sequence diagram grammar. 2014-12-16 20:51:48 +01:00			`A[Start]-->B{a = '1,2'}`
			`B-->\|True\|C[test = 1]`
			`B-->\|False\|Z[Store]`
Cleanup of sequence diagram rendering code (still experimental) Better handling of width. Instead uf using width 100% the width is set to the width of the graph. Should help issue #19. 2014-12-05 10:19:07 +01:00			`C-->D{condition};`
			`D-->\|True\|E[test = 2];`
			`D-->\|False\|F[test = 3];`
			`E-->G{condition2 = ''};`
			`F-->G;`
			`G-->\|True\|H[test = 4];`
			`G-->\|False\|I[test = 5];`
			`H-->J{condition3};`
			`I-->J;`
			`J-->\|True\|K[test = 6];`
			`J-->\|False\|L;`
			`K-->L[Print];`
			`L-->M[Any Action];`
			`M-->N[Any Other Action];`
			`N-->Z;`

			`</div>`
Adding experimental new grammars 2014-12-04 17:58:05 +01:00			`<h1>Dot syntax (experimental)</h1>`
			`<pre>`
			`digraph`
			`{`
			`a -> b -> c -- d -> e;`
			`a -- e;`
			`}`
			`</pre>`
Support for different arrow types in sequence diagrams: no arrow head, cross head and regular arrow head. 2015-01-04 17:56:58 +01:00			`<div class="mermaid2">`
Adding experimental new grammars 2014-12-04 17:58:05 +01:00			`digraph`
			`{`
			`a -> b -> c -- d -> e;`
			`a -- e;`
			`}`
			`</div>`


Adding missing files 2014-11-13 19:53:31 +01:00			`</body>`
Preparation for npm package 2014-12-02 18:36:16 +01:00			`</html>`