Skip to content

Latest commit

 

History

History
112 lines (80 loc) · 2.84 KB

Mermaid.md

File metadata and controls

112 lines (80 loc) · 2.84 KB

Mermaid Examples

Mermaid provides a concise and practical way to describe various technical diagrams and have them rendered within a web page. See Mermaid Demos for some of its capabilities.

Smartdown has integrated Mermaid, making it easier to mix Mermaid diagrams with Markdown and other Smartdown playables and content.

The examples below show some of the ways Mermaid may be used to help explain with diagrams.


%% Example of sequence diagram

graph LR
    id1((This is the text in the circle));

Graph/Flowchart Diagram

graph TB
   subgraph one
   a1-->a2{Rhombus}
   end
   subgraph two
   b1-->b2[This is a really long label.]
   end
   subgraph three
   c1-->c2
   end
   c1-->a2

Sequence Diagram

sequenceDiagram
A->> B: Query
B->> C: Forward query
Note right of C: Thinking...
C->> B: Response
B->> A: Forward response

Gantt Diagram

gantt
  dateFormat  YYYY-MM-DD
  title GANTT diagram functionality

  section A section
  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
  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
  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
  Describe gantt syntax               :after doc1, 3d
  Add gantt diagram to demo page      :20h
  Add another diagram to demo page    :48h

Experimenting with dynamic Mermaid

A quick experiment that shows how a Smartdown cell (called Name, in this example) can be used as input to derive a dynamic Mermaid diagram which uses Name. In this example, if Name is blank, then Alice will be used as the name.

What is your Name?

Here is your diagram, 

var actorName = env.Name;
if (!actorName || actorName.length === 0) {
   actorName = 'Alice';
}

var dynamicMermaidSource =
`
sequenceDiagram
    ${actorName}->>John: Hello John, how are you?
    John-->>${actorName}: I'm awesome, as are you, ${actorName}!
`;

smartdown.setVariable('MermaidSource', dynamicMermaidSource)

Back to Home