From 2eb883e87e3b7a80c4dfddb21f17ac6ac5ad0d17 Mon Sep 17 00:00:00 2001 From: knsv Date: Wed, 7 Jan 2015 11:27:35 +0100 Subject: [PATCH 1/3] Added page with examples --- css/seq.css | 2 +- development.html | 1 + docs/demos.md | 145 +++++++++++++++++++++++++++++++++++++++++++ docs/development.md | 2 +- flowchart.html | 1 + index.html | 1 + mermaidCLI.html | 1 + sequenceDiagram.html | 1 + usage.html | 1 + 9 files changed, 153 insertions(+), 2 deletions(-) create mode 100644 docs/demos.md diff --git a/css/seq.css b/css/seq.css index f207dfd131..dc57a7bac1 100644 --- a/css/seq.css +++ b/css/seq.css @@ -80,4 +80,4 @@ text.actor { } -.node { fill:#eaeaea; stroke:#666; stroke-width:1.5px; } +.node { fill:#DCDCFF; stroke:#666; stroke-width:1.5px; } diff --git a/development.html b/development.html index ee7f23f5d5..29949b6284 100644 --- a/development.html +++ b/development.html @@ -148,6 +148,7 @@
  • Flowchart
  • Sequence Diagram
  • mermaid CLI
    • +
  • Demos
  • Development
    • diff --git a/docs/demos.md b/docs/demos.md new file mode 100644 index 0000000000..83c504ecbb --- /dev/null +++ b/docs/demos.md @@ -0,0 +1,145 @@ +--- +title: Demos +order: 5 +--- + +# Demos +## Basic flowchart +``` +%% Example diagram +graph LR + A -- Link text --> B + A[Square Rect] --> C((Round Rect)) + B --> D{Rhombus} + C --> D +``` + +``` +graph LR + A -- Link text --> B + A[Square Rect] --> C((Round Rect)) + B --> D{Rhombus} + C --> D +``` + +## Larger flowchart with some styling + + +``` +%% Code for flowchart below +graph TB + sq[Square shape] --> ci((Circle shape)) + + od>Odd shape]-- Two line<br>edge comment --> ro + di{Diamond with <br/> line break} --> ro(Rounded<br>square<br>shape) + + %% Notice that no text in shape are added here instead that is appended further down + e --> od3>Really long text with linebreak<br>in an Odd shape] + + di-->ro2(Rounded square shape) + + %% Comments after double percent signs + e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-*ز) + + cyr[Cyrillic]-->cyr2((Circle shape Начало)); + + classDef green fill:#9f6,stroke:#333,stroke-width:2px; + classDef orange fill:#f96,stroke:#333,stroke-width:4px; + class sq,e green + class di orange +``` + +``` +graph TB + sq[Square shape] --> ci((Circle shape)) + + od>Odd shape]-- Two line
    edge comment --> ro + di{Diamond with
    line break} --> ro(Rounded
    square
    shape) + + %% Notice that no text in shape are added here instead that is appended further down + e --> od3>Really long text with linebreak
    in an Odd shape] + + di-->ro2(Rounded square shape) + + %% Comments after double percent signs + e((Inner / circle
    and some odd
    special characters)) --> f(,.?!+-*ز) + + cyr[Cyrillic]-->cyr2((Circle shape Начало)); + + classDef green fill:#9f6,stroke:#333,stroke-width:2px; + classDef orange fill:#f96,stroke:#333,stroke-width:4px; + class sq,e green + class di orange +``` +## Basic sequence diagram +``` +sequenceDiagram + Alice->>Bob: Hello Bob, how are you? + Bob-->>John: How about you John? + Bob--xAlice: I am good thanks! + Bob-xJohn: I am good thanks! + Note right of John: Bob thinks a long
    long time, so long
    that the text does
    not fit on a row. + + Bob-->Alice: Checking with John... + Alice->John: Yes... John, how are you? +``` +## Loops, alt and opt +``` +%% Sequence diagram code +sequenceDiagram + loop Daily query + Alice->>Bob: Hello Bob, how are you? + alt is sick + Bob->>Alice: Not so good :( + else is well + Bob->>Alice: Feeling fresh like a daisy + end + + opt Extra response + Bob->>Alice: Thanks for asking + end + end +``` +``` +sequenceDiagram + loop Daily query + Alice->>Bob: Hello Bob, how are you? + alt is sick + Bob->>Alice: Not so good :( + else is well + Bob->>Alice: Feeling fresh like a daisy + end + + opt Extra response + Bob->>Alice: Thanks for asking + end + end +``` +## Message to self in loop +``` +%% Sequence diagram code +sequenceDiagram + participant Alice + participant Bob + Alice->>John: Hello John, how are you? + loop Healthcheck + John->>John: Fight against hypochondria + end + Note right of John: Rational thoughts<br/>prevail... + John-->>Alice: Great! + John->>Bob: How about you? + Bob-->>John: Jolly good! +``` +``` +sequenceDiagram + participant Alice + participant Bob + Alice->>John: Hello John, how are you? + loop Healthcheck + John->>John: Fight against hypochondria + end + Note right of John: Rational thoughts
    prevail... + John-->>Alice: Great! + John->>Bob: How about you? + Bob-->>John: Jolly good! +``` \ No newline at end of file diff --git a/docs/development.md b/docs/development.md index 418daa0634..2935004e85 100644 --- a/docs/development.md +++ b/docs/development.md @@ -1,6 +1,6 @@ --- title: Development -order: 5 +order: 6 --- # Development: Updating the documentation diff --git a/flowchart.html b/flowchart.html index 6d2dc80844..b8cb45559c 100644 --- a/flowchart.html +++ b/flowchart.html @@ -148,6 +148,7 @@
  • Flowchart
  • Sequence Diagram
  • mermaid CLI
    • +
  • Demos
  • Development
    • diff --git a/index.html b/index.html index 651ccd4d60..cbfe16a321 100644 --- a/index.html +++ b/index.html @@ -148,6 +148,7 @@
  • Flowchart
  • Sequence Diagram
  • mermaid CLI
    • +
  • Demos
  • Development
    • diff --git a/mermaidCLI.html b/mermaidCLI.html index ab562ddfab..5be8a76981 100644 --- a/mermaidCLI.html +++ b/mermaidCLI.html @@ -148,6 +148,7 @@
  • Flowchart
  • Sequence Diagram
  • mermaid CLI
    • +
  • Demos
  • Development
    • diff --git a/sequenceDiagram.html b/sequenceDiagram.html index 87afdbb0a8..324a09071b 100644 --- a/sequenceDiagram.html +++ b/sequenceDiagram.html @@ -148,6 +148,7 @@
  • Flowchart
  • Sequence Diagram
  • mermaid CLI
    • +
  • Demos
  • Development
    • diff --git a/usage.html b/usage.html index a0c17b547c..1c816c7d5b 100644 --- a/usage.html +++ b/usage.html @@ -148,6 +148,7 @@
  • Flowchart
  • Sequence Diagram
  • mermaid CLI
    • +
  • Demos
  • Development
    • From 44a11e33c4f0a518ecfcea01a6ef8ec863aa0e19 Mon Sep 17 00:00:00 2001 From: knsv Date: Wed, 7 Jan 2015 11:28:36 +0100 Subject: [PATCH 2/3] Added page with examples --- demos.html | 313 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 313 insertions(+) create mode 100644 demos.html diff --git a/demos.html b/demos.html new file mode 100644 index 0000000000..a794656d1b --- /dev/null +++ b/demos.html @@ -0,0 +1,313 @@ + + + + + + Demos + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + + +
    +

    + mermaid + Diagrams and flowcharts from textsimilar to markdown +

    + +
    +
    +
    +
    +

    Demos

    +

    Basic flowchart

    +
    %% Example diagram
+graph LR
+    A -- Link text --> B
+    A[Square Rect] --> C((Round Rect))
+    B --> D{Rhombus}
+    C --> D
    graph LR + A -- Link text --> B + A[Square Rect] --> C((Round Rect)) + B --> D{Rhombus} + C --> D

    Larger flowchart with some styling

    +
    %% Code for flowchart below
+graph TB
+    sq[Square shape] --> ci((Circle shape))
+
+    od>Odd shape]-- Two line<br>edge comment --> ro
+    di{Diamond with <br/> line break} --> ro(Rounded<br>square<br>shape)
+
+    %% Notice that no text in shape are added here instead that is appended further down
+    e --> od3>Really long text with linebreak<br>in an Odd shape]
+
+    di-->ro2(Rounded square shape)
+
+    %% Comments after double percent signs
+    e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-*ز)
+
+    cyr[Cyrillic]-->cyr2((Circle shape Начало));
+
+     classDef green fill:#9f6,stroke:#333,stroke-width:2px;
+     classDef orange fill:#f96,stroke:#333,stroke-width:4px;
+     class sq,e green
+     class di orange
    graph TB + sq[Square shape] --> ci((Circle shape)) + + od>Odd shape]-- Two line
    edge comment --> ro + di{Diamond with
    line break} --> ro(Rounded
    square
    shape) + + %% Notice that no text in shape are added here instead that is appended further down + e --> od3>Really long text with linebreak
    in an Odd shape] + + di-->ro2(Rounded square shape) + + %% Comments after double percent signs + e((Inner / circle
    and some odd
    special characters)) --> f(,.?!+-*ز) + + cyr[Cyrillic]-->cyr2((Circle shape Начало)); + + classDef green fill:#9f6,stroke:#333,stroke-width:2px; + classDef orange fill:#f96,stroke:#333,stroke-width:4px; + class sq,e green + class di orange

    Basic sequence diagram

    +
    sequenceDiagram + Alice->>Bob: Hello Bob, how are you? + Bob-->>John: How about you John? + Bob--xAlice: I am good thanks! + Bob-xJohn: I am good thanks! + Note right of John: Bob thinks a long
    long time, so long
    that the text does
    not fit on a row. + + Bob-->Alice: Checking with John... + Alice->John: Yes... John, how are you?

    Loops, alt and opt

    +
    %% Sequence diagram code
+sequenceDiagram
+    loop Daily query
+        Alice->>Bob: Hello Bob, how are you?
+        alt is sick
+            Bob->>Alice: Not so good :(
+        else is well
+            Bob->>Alice: Feeling fresh like a daisy
+        end
+
+        opt Extra response
+            Bob->>Alice: Thanks for asking
+        end
+    end
    sequenceDiagram + loop Daily query + Alice->>Bob: Hello Bob, how are you? + alt is sick + Bob->>Alice: Not so good :( + else is well + Bob->>Alice: Feeling fresh like a daisy + end + + opt Extra response + Bob->>Alice: Thanks for asking + end + end

    Message to self in loop

    +
    %% Sequence diagram code
+sequenceDiagram
+    participant Alice
+    participant Bob
+    Alice->>John: Hello John, how are you?
+    loop Healthcheck
+        John->>John: Fight against hypochondria
+    end
+    Note right of John: Rational thoughts<br/>prevail...
+    John-->>Alice: Great!
+    John->>Bob: How about you?
+    Bob-->>John: Jolly good!
    sequenceDiagram + participant Alice + participant Bob + Alice->>John: Hello John, how are you? + loop Healthcheck + John->>John: Fight against hypochondria + end + Note right of John: Rational thoughts
    prevail... + John-->>Alice: Great! + John->>Bob: How about you? + Bob-->>John: Jolly good!
    +
    +
    +
    + + Star + Fork + Download + + Build Status + Code Climate + +
    +
    +
     
    +
    +
    +
    +


    These pages are generated from markdown source files. flowchart.md is an example of a markdown file which includes mermaid source.

    +
    +
    + + + + From 822ab591bde380d59713da8ccd194d3bbec0fc07 Mon Sep 17 00:00:00 2001 From: knsv Date: Wed, 7 Jan 2015 11:41:18 +0100 Subject: [PATCH 3/3] Uodated code example for basic sequence diagram in demos page --- demos.html | 18 ++++++++++++++---- docs/demos.md | 19 ++++++++++++++++--- 2 files changed, 30 insertions(+), 7 deletions(-) diff --git a/demos.html b/demos.html index a794656d1b..7f2c992c53 100644 --- a/demos.html +++ b/demos.html @@ -225,11 +225,21 @@

    Basic flowchart

    classDef orange fill:#f96,stroke:#333,stroke-width:4px; class sq,e green class di orange

    Basic sequence diagram

    -
    sequenceDiagram - Alice->>Bob: Hello Bob, how are you? +
    %% Sequence diagram code
+sequenceDiagram
+    Alice ->> Bob: Hello Bob, how are you?
     Bob-->>John: How about you John?
-    Bob--xAlice: I am good thanks!
-    Bob-xJohn: I am good thanks!
+    Bob--x Alice: I am good thanks!
+    Bob-x John: I am good thanks!
+    Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.
+
+    Bob-->Alice: Checking with John...
+    Alice->John: Yes... John, how are you?
    sequenceDiagram + Alice->> Bob: Hello Bob, how are you? + Bob-->> John: How about you John? + Bob--x Alice: I am good thanks! + Bob-x John: I am good thanks! + Note right of John: Bob thinks a long
    long time, so long
    that the text does
    not fit on a row. Bob-->Alice: Checking with John... diff --git a/docs/demos.md b/docs/demos.md index 83c504ecbb..e74d5d2931 100644 --- a/docs/demos.md +++ b/docs/demos.md @@ -73,11 +73,24 @@ graph TB ``` ## Basic sequence diagram ``` +%% Sequence diagram code sequenceDiagram - Alice->>Bob: Hello Bob, how are you? + Alice ->> Bob: Hello Bob, how are you? Bob-->>John: How about you John? - Bob--xAlice: I am good thanks! - Bob-xJohn: I am good thanks! + Bob--x Alice: I am good thanks! + Bob-x John: I am good thanks! + Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row. + + Bob-->Alice: Checking with John... + Alice->John: Yes... John, how are you? +``` +``` +sequenceDiagram + Alice->> Bob: Hello Bob, how are you? + Bob-->> John: How about you John? + Bob--x Alice: I am good thanks! + Bob-x John: I am good thanks! + Note right of John: Bob thinks a long
    long time, so long
    that the text does
    not fit on a row. Bob-->Alice: Checking with John...