Merge pull request #23 from arichika/feature/update-0.2.4

update 0.2.4

CHANGELOG.md

@@ -1,5 +1,12 @@
 # Change Log
 
+## 0.2.4
+
+* Update dependencies.
+  * mermaid `^8.4.7` from `^8.4.4`
+  * Thank you for PR, https://github.com/XavierBoubert
+  * https://github.com/arichika/previewseqdiag-vscode/pull/22
+
 ## 0.2.3
 
 * Bugfix: Webpack support was broken and fixed from 0.2.2.

README.md

@@ -25,6 +25,13 @@ This is usefull to avoid multipicate the same code on many files.
 
 [CHANGELOG.md](CHANGELOG.md)
 
+## 0.2.4
+
+* Update dependencies.
+  * mermaid `^8.4.7` from `^8.4.4`
+  * Thank you for PR, https://github.com/XavierBoubert
+  * https://github.com/arichika/previewseqdiag-vscode/pull/22
+
 ### 0.2.3
 
 * Bugfix: Webpack support was broken and fixed from 0.2.2.

dist/mermaid/index.html

@@ -289,16 +289,100 @@
       style 456ac9b0d15a8b7f1e71073221059886 fill:#f9f,stroke:#333,stroke-width:4px
   </div>
   <div class="mermaid">
-graph TD
-A[Christmas] -->|Get money| B(Go shopping)
-B --> C{{Let me think...<br />Do I want something for work,<br />something to spend every free second with,<br />or something to get around?}}
-C -->|One| D[Laptop]
-C -->|Two| E[iPhone]
-C -->|Three| F[Car]
-click A "index.html#link-clicked" "link test"
-click B testClick "click test"
-classDef someclass fill:#f96;
-class A someclass;
+    graph TD
+    A[Christmas] -->|Get money| B(Go shopping)
+    B --> C{{Let me think...<br />Do I want something for work,<br />something to spend every free second with,<br />or something to get around?}}
+    C -->|One| D[Laptop]
+    C -->|Two| E[iPhone]
+    C -->|Three| F[Car]
+    click A "index.html#link-clicked" "link test"
+    click B testClick "click test"
+    classDef someclass fill:#f96;
+    class A someclass;
+    class C someclass;
+  </div>
+  <div class="mermaid">
+    graph TD
+    A([stadium shape test])
+    A -->|Get money| B([Go shopping])
+    B --> C([Let me think...<br />Do I want something for work,<br />something to spend every free second with,<br />or something to get around?])
+    C -->|One| D([Laptop])
+    C -->|Two| E([iPhone])
+    C -->|Three| F([Car<br/>wroom wroom])
+    click A "index.html#link-clicked" "link test"
+    click B testClick "click test"
+    classDef someclass fill:#f96;
+    class A someclass;
+    class C someclass;
+  </div>
+  <div class="mermaid">
+    graph LR
+    A[(cylindrical<br />shape<br />test)]
+    A -->|Get money| B1[(Go shopping 1)]
+    A -->|Get money| B2[(Go shopping 2)]
+    A -->|Get money| B3[(Go shopping 3)]
+    C[(Let me think...<br />Do I want something for work,<br />something to spend every free second with,<br />or something to get around?)]
+    B1 --> C
+    B2 --> C
+    B3 --> C
+    C -->|One| D[(Laptop)]
+    C -->|Two| E[(iPhone)]
+    C -->|Three| F[(Car)]
+    click A "index.html#link-clicked" "link test"
+    click B testClick "click test"
+    classDef someclass fill:#f96;
+    class A someclass;
+  </div>
+  <div class="mermaid">
+    graph LR
+    A1[Multi<br>Line] -->|Multi<br>Line| B1(Multi<br>Line)
+    C1[Multi<br/>Line] -->|Multi<br/>Line| D1(Multi<br/>Line)
+    E1[Multi<br />Line] -->|Multi<br />Line| F1(Multi<br />Line)
+    A2[Multi<br>Line] -->|Multi<br>Line| B2(Multi<br>Line)
+    C2[Multi<br/>Line] -->|Multi<br/>Line| D2(Multi<br/>Line)
+    E2[Multi<br />Line] -->|Multi<br />Line| F2(Multi<br />Line)
+    linkStyle 0 stroke:DarkGray,stroke-width:2px
+    linkStyle 1 stroke:DarkGray,stroke-width:2px
+    linkStyle 2 stroke:DarkGray,stroke-width:2px
+  </div>
+  <div class="mermaid">
+    graph LR
+    A(( )) -->|step 1| B(( ))
+    B(( )) -->|step 2| C(( ))
+    C(( )) -->|step 3| D(( ))
+    linkStyle 1 stroke:greenyellow,stroke-width:2px
+    style C fill:greenyellow,stroke:green,stroke-width:4px
+  </div>
+  <div class="mermaid">
+    graph TB
+    TITLE["Link Click Events<br>(click the nodes below)"]
+    A[link test]
+    B[anchor test]
+    C[mailto test]
+    D[other protocol test]
+    E[script test]
+    TITLE --> A & B & C & D & E
+    click A "https://mermaid-js.github.io/mermaid/#/" "link test"
+    click B "#link-clicked" "anchor test"
+    click C "mailto:[email protected]" "mailto test"
+    click D "notes://do-your-thing/id" "other protocol test"
+    click E "javascript:alert('test')" "script test"
+  </div>
+  <hr/>
+  <div class="mermaid">
+    graph LR
+    A[red<br>text] -->|red<br>text| B(blue<br>text)
+    C[/red<br/>text/] -->|blue<br/>text| D{blue<br/>text}
+    E{{default<br />style}} -->|default<br />style| F([default<br />style])
+    linkStyle default color:Sienna;
+    linkStyle 0 color:red;
+    linkStyle 1 stroke:DarkGray,stroke-width:2px,color:#0000ff
+    style A color:red;
+    style B color:blue;
+    style C stroke:#ff0000,fill:#ffcccc,color:#ff0000
+    style D stroke:#0000ff,fill:#ccccff,color:#0000ff
+    click B "index.html#link-clicked" "link test"
+    click D testClick "click test"
   </div>
 
   <hr/>
@@ -331,6 +415,21 @@
 Alice -->> John: Parallel message 2
 end
   </div>
+  <div class="mermaid">
+    sequenceDiagram
+    participant 1 as multiline<br>using #lt;br#gt;
+    participant 2 as multiline<br/>using #lt;br/#gt;
+    participant 3 as multiline<br />using #lt;br /#gt;
+    participant 4 as multiline<br 	/>using #lt;br 	/#gt;
+    1->>2: multiline<br>using #lt;br#gt;
+    note right of 2: multiline<br>using #lt;br#gt;
+    2->>3: multiline<br/>using #lt;br/#gt;
+    note right of 3: multiline<br/>using #lt;br/#gt;
+    3->>4: multiline<br />using #lt;br /#gt;
+    note right of 4: multiline<br />using #lt;br /#gt;
+    4->>1: multiline<br 	/>using #lt;br 	/#gt;
+    note right of 1: multiline<br 	/>using #lt;br 	/#gt;
+  </div>
 
   <hr/>
 
@@ -372,6 +471,37 @@
 Add gantt diagram to demo page      : 20h
 Add another diagram to demo page    : 48h
   </div>
+  <div class="mermaid">
+    gantt
+    dateFormat  YYYY-MM-DD
+    axisFormat  %d/%m
+    title       GANTT diagram with multiline section titles
+    excludes    weekdays 2014-01-10
+
+    section A section<br>multiline
+    Completed task            : done,    des1, 2014-01-06,2014-01-08
+    Active task               : active,  des2, 2014-01-09, 3d
+    Future task               :          des3, after des2, 5d
+    Future task2              :          des4, after des3, 5d
+
+    section Critical tasks<br/>multiline
+    Completed task in the critical line : crit, done, 2014-01-06, 24h
+    Implement parser and jison          : crit, done, after des1, 2d
+    Create tests for parser             : crit, active, 3d
+    Future task in critical line        : crit, 5d
+    Create tests for renderer           : 2d
+    Add to mermaid                      : 1d
+
+    section Documentation<br />multiline
+    Describe gantt syntax               : active, a1, after des1, 3d
+    Add gantt diagram to demo page      : after a1, 20h
+    Add another diagram to demo page    : doc1, after a1, 48h
+
+    section Last section<br	/>multiline
+    Describe gantt syntax               : after doc1, 3d
+    Add gantt diagram to demo page      : 20h
+    Add another diagram to demo page    : 48h
+  </div>
 
   <hr/>
 
@@ -418,20 +548,58 @@
   size()
 }
   </div>
+
+  <div class="mermaid">
+    classDiagram
+    class Class01~T~
+    Class01 : #size()
+    Class01 : -int chimp
+    Class01 : +int gorilla
+    class Class10~T~ {
+      &lt;&lt;service&gt;&gt;
+      int id
+      size()
+    }
+  </div>
+
+  <div class="mermaid">
+    classDiagram
+    Class01~T~ <|-- AveryLongClass : Cool
+    &lt;&lt;interface&gt;&gt; Class01
+    Class03~T~ "0" *-- "0..n" Class04
+    Class05 "1" o-- "many" Class06
+    Class07~T~ .. Class08
+    Class09 "many" --> "1" C2  : Where am i?
+    Class09 "0" --* "1..n" C3
+    Class09 --|> Class07
+    Class07 : equals()
+    Class07 : Object[] elementData
+    Class01 : #size()
+    Class01 : -int chimp
+    Class01 : +int gorilla
+    Class08 <--> C2: Cool label
+    class Class10 {
+      &lt;&lt;service&gt;&gt;
+      int id
+      size()
+    }
+  </div>
+
   <div class="mermaid">
     stateDiagram
       State1
-      </div>
+  </div>
 
-      <hr>
-      <div class="mermaid">
-        stateDiagram
-        [*] --> First
-        state First {
-            [*] --> second
-            second --> [*]
-        }
-          </div>
+  <hr>
+
+  <div class="mermaid">
+    stateDiagram
+    [*] --> First
+    state First {
+        [*] --> second
+        second --> [*]
+    }
+  </div>
   <div class="mermaid">
     stateDiagram
         State1: The state with a note
@@ -441,15 +609,24 @@
         end note
         State1 --> State2
         note left of State2 : This is the note to the left.
-      </div>
+  </div>
+  <div class="mermaid">
+    stateDiagram
+    State1
+    note right of State1
+    Line1<br>Line2<br/>Line3<br />Line4<br	/>Line5
+    end note
+  </div>
 
+  <h1 id="link-clicked">Anchor for "link-clicked" test</h1>
 
   <script src="./mermaid.js"></script>
   <script>
     mermaid.initialize({
       theme: 'forest',
       // themeCSS: '.node rect { fill: red; }',
       logLevel: 3,
+      securityLevel: 'loose',
       flowchart: { curve: 'basis' },
       gantt: { axisFormat: '%m/%d/%Y' },
       sequence: { actorMargin: 50 },