Sage
Welcome to Sage
Volume (59%) Hide Volume
Topics
Graphs and Diagrams
Sage supports graphs and diagrams using Mermaid, a popular JavaScript-based diagramming and charting tool.

In Sage, the [mermaid] tag defines a Mermaid graph. Below are several different kinds of examples.

Flow Chart

A flow chart…

[mermaid] graph LR A[Start] --> B{Error?}; B -->|Yes| C[Hmm...]; C --> D[Debug]; D --> B; B ---->|No| E[Yay!]; [end]

The above produces this chart…

%%{init:{"theme":"base","themeVariables":{"fontFamily":"Segoe UI,SegoeUI,Helvetica Neue,Helvetica,Arial,Tahoma","primaryColor":"#202020","secondaryColor":"#400000","tertiaryColor":"#002040","lineColor":"#e0e0e0","primaryTextColor":"#ffffff","primaryBorderColor":"#407FBF","xyChart": {"backgroundColor": "#202020","titleColor": "#ffffff","xAxisLabelColor": "#8CB2D9","xAxisTitleColor": "#8CB2D9","xAxisTickColor": "#8CB2D9","xAxisLineColor": "#8CB2D9","yAxisLabelColor": "#8CD98C","yAxisTitleColor": "#8CD98C","yAxisTickColor": "#8CD98C","yAxisLineColor": "#8CD98C","plotColorPalette": "#D9D98C,#D98C8C,#B28CD9,#D9B28C,#D98CB2,#8CD9D9,#8C8CD9,#D98CD9"}}}}%% graph LR A[Start] --> B{Error?}; B -->|Yes| C[Hmm...]; C --> D[Debug]; D --> B; B ---->|No| E[Yay!];

The same chart, but this time, in a box:


%%{init:{"theme":"base","themeVariables":{"fontFamily":"Segoe UI,SegoeUI,Helvetica Neue,Helvetica,Arial,Tahoma","primaryColor":"#202020","secondaryColor":"#400000","tertiaryColor":"#002040","lineColor":"#e0e0e0","primaryTextColor":"#ffffff","primaryBorderColor":"#407FBF","xyChart": {"backgroundColor": "#202020","titleColor": "#ffffff","xAxisLabelColor": "#8CB2D9","xAxisTitleColor": "#8CB2D9","xAxisTickColor": "#8CB2D9","xAxisLineColor": "#8CB2D9","yAxisLabelColor": "#8CD98C","yAxisTitleColor": "#8CD98C","yAxisTickColor": "#8CD98C","yAxisLineColor": "#8CD98C","plotColorPalette": "#D9D98C,#D98C8C,#B28CD9,#D9B28C,#D98CB2,#8CD9D9,#8C8CD9,#D98CD9"}}}}%% graph LR A[Start] --> B{Error?}; B -->|Yes| C[Hmm...]; C --> D[Debug]; D --> B; B ---->|No| E[Yay!];


Sub-Graphs

A graph with sub-graphs…

[mermaid] graph LR subgraph Client A(("Client<br>[GUI]")) --> B[Client<br>Proxy] B --> C[TCP<br>Client] end C -. "~Network~" .-> E subgraph Server E[TCP<br>Server] --> F[Server<br>Skeleton] F --> G((Impl.<br>Object)) end [end]

The above produces this graph…


%%{init:{"theme":"base","themeVariables":{"fontFamily":"Segoe UI,SegoeUI,Helvetica Neue,Helvetica,Arial,Tahoma","primaryColor":"#202020","secondaryColor":"#400000","tertiaryColor":"#002040","lineColor":"#e0e0e0","primaryTextColor":"#ffffff","primaryBorderColor":"#407FBF","xyChart": {"backgroundColor": "#202020","titleColor": "#ffffff","xAxisLabelColor": "#8CB2D9","xAxisTitleColor": "#8CB2D9","xAxisTickColor": "#8CB2D9","xAxisLineColor": "#8CB2D9","yAxisLabelColor": "#8CD98C","yAxisTitleColor": "#8CD98C","yAxisTickColor": "#8CD98C","yAxisLineColor": "#8CD98C","plotColorPalette": "#D9D98C,#D98C8C,#B28CD9,#D9B28C,#D98CB2,#8CD9D9,#8C8CD9,#D98CD9"}}}}%% graph LR subgraph Client A(("Client
[GUI]")) --> B[Client
Proxy] B --> C[TCP
Client] end C -. "~Network~" .-> E subgraph Server E[TCP
Server] --> F[Server
Skeleton] F --> G((Impl.
Object)) end


Sequence Diagram

A sequence diagram…

[mermaid] sequenceDiagram Alice->>John: Hello John, how are you? loop Healthcheck John->>John: Fight against hypochondria end Note right of John: Rational thoughts! John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good! [end]

The above produces this diagram…


%%{init:{"theme":"base","themeVariables":{"fontFamily":"Segoe UI,SegoeUI,Helvetica Neue,Helvetica,Arial,Tahoma","primaryColor":"#202020","secondaryColor":"#400000","tertiaryColor":"#002040","lineColor":"#e0e0e0","primaryTextColor":"#ffffff","primaryBorderColor":"#407FBF","xyChart": {"backgroundColor": "#202020","titleColor": "#ffffff","xAxisLabelColor": "#8CB2D9","xAxisTitleColor": "#8CB2D9","xAxisTickColor": "#8CB2D9","xAxisLineColor": "#8CB2D9","yAxisLabelColor": "#8CD98C","yAxisTitleColor": "#8CD98C","yAxisTickColor": "#8CD98C","yAxisLineColor": "#8CD98C","plotColorPalette": "#D9D98C,#D98C8C,#B28CD9,#D9B28C,#D98CB2,#8CD9D9,#8C8CD9,#D98CD9"}}}}%% sequenceDiagram Alice->>John: Hello John, how are you? loop Healthcheck John->>John: Fight against hypochondria end Note right of John: Rational thoughts! John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good!


State Diagram

A state diagram…

[mermaid] stateDiagram-v2 state fork_state <<fork>> [*] --> fork_state fork_state --> State2 fork_state --> State3 state join_state <<join>> State2 --> join_state State3 --> join_state join_state --> State4 State4 --> [*] [end]

The above produces this diagram…


%%{init:{"theme":"base","themeVariables":{"fontFamily":"Segoe UI,SegoeUI,Helvetica Neue,Helvetica,Arial,Tahoma","primaryColor":"#202020","secondaryColor":"#400000","tertiaryColor":"#002040","lineColor":"#e0e0e0","primaryTextColor":"#ffffff","primaryBorderColor":"#407FBF","xyChart": {"backgroundColor": "#202020","titleColor": "#ffffff","xAxisLabelColor": "#8CB2D9","xAxisTitleColor": "#8CB2D9","xAxisTickColor": "#8CB2D9","xAxisLineColor": "#8CB2D9","yAxisLabelColor": "#8CD98C","yAxisTitleColor": "#8CD98C","yAxisTickColor": "#8CD98C","yAxisLineColor": "#8CD98C","plotColorPalette": "#D9D98C,#D98C8C,#B28CD9,#D9B28C,#D98CB2,#8CD9D9,#8C8CD9,#D98CD9"}}}}%% stateDiagram-v2 state fork_state <> [*] --> fork_state fork_state --> State2 fork_state --> State3 state join_state <> State2 --> join_state State3 --> join_state join_state --> State4 State4 --> [*]


Class Diagram

A class diagram…

[mermaid] classDiagram Person <|-- Student Person <|-- Professor Person : +String name Person : +String phoneNumber Person : +String emailAddress Person: +purchaseParkingPass() Address "1" <-- "0..1" Person:lives at class Student{ +int studentNumber +int averageMark +isEligibleToEnrol() +getSeminarsTaken() } class Professor{ +int salary } class Address{ +String street +String city +String state +int postalCode +String country -validate() +outputAsLabel() } [end]

The above produces this diagram…


%%{init:{"theme":"base","themeVariables":{"fontFamily":"Segoe UI,SegoeUI,Helvetica Neue,Helvetica,Arial,Tahoma","primaryColor":"#202020","secondaryColor":"#400000","tertiaryColor":"#002040","lineColor":"#e0e0e0","primaryTextColor":"#ffffff","primaryBorderColor":"#407FBF","xyChart": {"backgroundColor": "#202020","titleColor": "#ffffff","xAxisLabelColor": "#8CB2D9","xAxisTitleColor": "#8CB2D9","xAxisTickColor": "#8CB2D9","xAxisLineColor": "#8CB2D9","yAxisLabelColor": "#8CD98C","yAxisTitleColor": "#8CD98C","yAxisTickColor": "#8CD98C","yAxisLineColor": "#8CD98C","plotColorPalette": "#D9D98C,#D98C8C,#B28CD9,#D9B28C,#D98CB2,#8CD9D9,#8C8CD9,#D98CD9"}}}}%% classDiagram Person <|-- Student Person <|-- Professor Person : +String name Person : +String phoneNumber Person : +String emailAddress Person: +purchaseParkingPass() Address "1" <-- "0..1" Person:lives at class Student{ +int studentNumber +int averageMark +isEligibleToEnrol() +getSeminarsTaken() } class Professor{ +int salary } class Address{ +String street +String city +String state +int postalCode +String country -validate() +outputAsLabel() }


ER Diagram

An ER diagram…

[mermaid] erDiagram CUSTOMER ||--o{ ORDER : places CUSTOMER { string name string custNumber string sector } ORDER ||--|{ LINE-ITEM : contains ORDER { int orderNumber string deliveryAddress } LINE-ITEM { string productCode int quantity float pricePerUnit } [end]

The above produces this diagram…


%%{init:{"theme":"base","themeVariables":{"fontFamily":"Segoe UI,SegoeUI,Helvetica Neue,Helvetica,Arial,Tahoma","primaryColor":"#202020","secondaryColor":"#400000","tertiaryColor":"#002040","lineColor":"#e0e0e0","primaryTextColor":"#ffffff","primaryBorderColor":"#407FBF","xyChart": {"backgroundColor": "#202020","titleColor": "#ffffff","xAxisLabelColor": "#8CB2D9","xAxisTitleColor": "#8CB2D9","xAxisTickColor": "#8CB2D9","xAxisLineColor": "#8CB2D9","yAxisLabelColor": "#8CD98C","yAxisTitleColor": "#8CD98C","yAxisTickColor": "#8CD98C","yAxisLineColor": "#8CD98C","plotColorPalette": "#D9D98C,#D98C8C,#B28CD9,#D9B28C,#D98CB2,#8CD9D9,#8C8CD9,#D98CD9"}}}}%% erDiagram CUSTOMER ||--o{ ORDER : places CUSTOMER { string name string custNumber string sector } ORDER ||--|{ LINE-ITEM : contains ORDER { int orderNumber string deliveryAddress } LINE-ITEM { string productCode int quantity float pricePerUnit }


Gantt Chart

A Gantt diagram…

[mermaid] gantt title A Gantt Diagram dateFormat YYYY-MM-DD section Section A task :a1, 2014-01-01, 30d Another task :after a1 , 20d section Another Task in sec :active, 2014-01-12 , 12d another task :crit, 24d [end]

The above produces this diagram…


%%{init:{"theme":"base","themeVariables":{"fontFamily":"Segoe UI,SegoeUI,Helvetica Neue,Helvetica,Arial,Tahoma","primaryColor":"#202020","secondaryColor":"#400000","tertiaryColor":"#002040","lineColor":"#e0e0e0","primaryTextColor":"#ffffff","primaryBorderColor":"#407FBF","xyChart": {"backgroundColor": "#202020","titleColor": "#ffffff","xAxisLabelColor": "#8CB2D9","xAxisTitleColor": "#8CB2D9","xAxisTickColor": "#8CB2D9","xAxisLineColor": "#8CB2D9","yAxisLabelColor": "#8CD98C","yAxisTitleColor": "#8CD98C","yAxisTickColor": "#8CD98C","yAxisLineColor": "#8CD98C","plotColorPalette": "#D9D98C,#D98C8C,#B28CD9,#D9B28C,#D98CB2,#8CD9D9,#8C8CD9,#D98CD9"}}}}%% gantt title A Gantt Diagram dateFormat YYYY-MM-DD section Section A task :a1, 2014-01-01, 30d Another task :after a1 , 20d section Another Task in sec :active, 2014-01-12 , 12d another task :crit, 24d


User Journey Diagram

A user journey diagram…

[mermaid] journey title My working day section Go to work Make tea: 5: Me Go upstairs: 3: Me Do work: 1: Me, Cat section Go home Go downstairs: 5: Me Sit down: 3: Me [end]

The above produces this diagram…


%%{init:{"theme":"base","themeVariables":{"fontFamily":"Segoe UI,SegoeUI,Helvetica Neue,Helvetica,Arial,Tahoma","primaryColor":"#202020","secondaryColor":"#400000","tertiaryColor":"#002040","lineColor":"#e0e0e0","primaryTextColor":"#ffffff","primaryBorderColor":"#407FBF","xyChart": {"backgroundColor": "#202020","titleColor": "#ffffff","xAxisLabelColor": "#8CB2D9","xAxisTitleColor": "#8CB2D9","xAxisTickColor": "#8CB2D9","xAxisLineColor": "#8CB2D9","yAxisLabelColor": "#8CD98C","yAxisTitleColor": "#8CD98C","yAxisTickColor": "#8CD98C","yAxisLineColor": "#8CD98C","plotColorPalette": "#D9D98C,#D98C8C,#B28CD9,#D9B28C,#D98CB2,#8CD9D9,#8C8CD9,#D98CD9"}}}}%% journey title My working day section Go to work Make tea: 5: Me Go upstairs: 3: Me Do work: 1: Me, Cat section Go home Go downstairs: 5: Me Sit down: 3: Me


Requirement Diagram

A requirement diagram…

[mermaid] requirementDiagram requirement test_req { id: 1 text: the test text. risk: high verifymethod: test } element test_entity { type: simulation } test_entity - satisfies -> test_req [end]

The above produces this chart…


%%{init:{"theme":"base","themeVariables":{"fontFamily":"Segoe UI,SegoeUI,Helvetica Neue,Helvetica,Arial,Tahoma","primaryColor":"#202020","secondaryColor":"#400000","tertiaryColor":"#002040","lineColor":"#e0e0e0","primaryTextColor":"#ffffff","primaryBorderColor":"#407FBF","xyChart": {"backgroundColor": "#202020","titleColor": "#ffffff","xAxisLabelColor": "#8CB2D9","xAxisTitleColor": "#8CB2D9","xAxisTickColor": "#8CB2D9","xAxisLineColor": "#8CB2D9","yAxisLabelColor": "#8CD98C","yAxisTitleColor": "#8CD98C","yAxisTickColor": "#8CD98C","yAxisLineColor": "#8CD98C","plotColorPalette": "#D9D98C,#D98C8C,#B28CD9,#D9B28C,#D98CB2,#8CD9D9,#8C8CD9,#D98CD9"}}}}%% requirementDiagram requirement test_req { id: 1 text: the test text. risk: high verifymethod: test } element test_entity { type: simulation } test_entity - satisfies -> test_req


Pie Chart

A pie chart…

[mermaid] pie title Pets adopted by volunteers "Dogs" : 386 "Cats" : 85 "Rats" : 15 "Birds": 10 "Goats": 10 [end]

The above produces this chart…


%%{init:{"theme":"base","themeVariables":{"fontFamily":"Segoe UI,SegoeUI,Helvetica Neue,Helvetica,Arial,Tahoma","primaryColor":"#202020","secondaryColor":"#400000","tertiaryColor":"#002040","lineColor":"#e0e0e0","primaryTextColor":"#ffffff","primaryBorderColor":"#407FBF","xyChart": {"backgroundColor": "#202020","titleColor": "#ffffff","xAxisLabelColor": "#8CB2D9","xAxisTitleColor": "#8CB2D9","xAxisTickColor": "#8CB2D9","xAxisLineColor": "#8CB2D9","yAxisLabelColor": "#8CD98C","yAxisTitleColor": "#8CD98C","yAxisTickColor": "#8CD98C","yAxisLineColor": "#8CD98C","plotColorPalette": "#D9D98C,#D98C8C,#B28CD9,#D9B28C,#D98CB2,#8CD9D9,#8C8CD9,#D98CD9"}}}}%% pie title Pets Adopted by Volunteers "Dogs" : 386 "Cats" : 622 "Rats" : 218 "Birds": 343


Mindmap

A mind map…

[mermaid] mindmap root((mindmap)) Origins Long history ::icon(fa fa-book) Popularisation British popular psychology author Tony Buzan Research On effectivness<br/>and features On Automatic creation Uses Creative techniques Strategic planning Argument mapping Tools Pen and paper Mermaid [end]

The above produces this diagram…


%%{init:{"theme":"base","themeVariables":{"fontFamily":"Segoe UI,SegoeUI,Helvetica Neue,Helvetica,Arial,Tahoma","primaryColor":"#202020","secondaryColor":"#400000","tertiaryColor":"#002040","lineColor":"#e0e0e0","primaryTextColor":"#ffffff","primaryBorderColor":"#407FBF","xyChart": {"backgroundColor": "#202020","titleColor": "#ffffff","xAxisLabelColor": "#8CB2D9","xAxisTitleColor": "#8CB2D9","xAxisTickColor": "#8CB2D9","xAxisLineColor": "#8CB2D9","yAxisLabelColor": "#8CD98C","yAxisTitleColor": "#8CD98C","yAxisTickColor": "#8CD98C","yAxisLineColor": "#8CD98C","plotColorPalette": "#D9D98C,#D98C8C,#B28CD9,#D9B28C,#D98CB2,#8CD9D9,#8C8CD9,#D98CD9"}}}}%% mindmap root((mindmap)) Origins Long history ::icon(fa fa-book) Popularisation British popular psychology author Tony Buzan Research On effectivness
and features On Automatic creation Uses Creative techniques Strategic planning Argument mapping Tools Pen and paper Mermaid


Quadrant Chart

A quadrant chart…

[mermaid] quadrantChart title Reach and engagement of campaigns x-axis Low Reach --> High Reach y-axis Low Engagement --> High Engagement quadrant-1 We should expand quadrant-2 Need to promote quadrant-3 Re-evaluate quadrant-4 May be improved Campaign A: [0.3, 0.6] Campaign B: [0.45, 0.23] Campaign C: [0.57, 0.69] Campaign D: [0.78, 0.34] Campaign E: [0.40, 0.34] Campaign F: [0.35, 0.78] [end]

The above produces this chart…


%%{init:{"theme":"base","themeVariables":{"fontFamily":"Segoe UI,SegoeUI,Helvetica Neue,Helvetica,Arial,Tahoma","primaryColor":"#202020","secondaryColor":"#400000","tertiaryColor":"#002040","lineColor":"#e0e0e0","primaryTextColor":"#ffffff","primaryBorderColor":"#407FBF","xyChart": {"backgroundColor": "#202020","titleColor": "#ffffff","xAxisLabelColor": "#8CB2D9","xAxisTitleColor": "#8CB2D9","xAxisTickColor": "#8CB2D9","xAxisLineColor": "#8CB2D9","yAxisLabelColor": "#8CD98C","yAxisTitleColor": "#8CD98C","yAxisTickColor": "#8CD98C","yAxisLineColor": "#8CD98C","plotColorPalette": "#D9D98C,#D98C8C,#B28CD9,#D9B28C,#D98CB2,#8CD9D9,#8C8CD9,#D98CD9"}}}}%% quadrantChart title Reach and engagement of campaigns x-axis Low Reach --> High Reach y-axis Low Engagement --> High Engagement quadrant-1 We should expand quadrant-2 Need to promote quadrant-3 Re-evaluate quadrant-4 May be improved Campaign A: [0.3, 0.6] Campaign B: [0.45, 0.23] Campaign C: [0.57, 0.69] Campaign D: [0.78, 0.34] Campaign E: [0.40, 0.34] Campaign F: [0.35, 0.78]


Timeline

A timeline…

[mermaid] timeline title History of Social Media Platform 2002 : LinkedIn 2004 : Facebook : Google 2005 : Youtube 2006 : Twitter [end]

The above produces this diagram…


%%{init:{"theme":"base","themeVariables":{"fontFamily":"Segoe UI,SegoeUI,Helvetica Neue,Helvetica,Arial,Tahoma","primaryColor":"#202020","secondaryColor":"#400000","tertiaryColor":"#002040","lineColor":"#e0e0e0","primaryTextColor":"#ffffff","primaryBorderColor":"#407FBF","xyChart": {"backgroundColor": "#202020","titleColor": "#ffffff","xAxisLabelColor": "#8CB2D9","xAxisTitleColor": "#8CB2D9","xAxisTickColor": "#8CB2D9","xAxisLineColor": "#8CB2D9","yAxisLabelColor": "#8CD98C","yAxisTitleColor": "#8CD98C","yAxisTickColor": "#8CD98C","yAxisLineColor": "#8CD98C","plotColorPalette": "#D9D98C,#D98C8C,#B28CD9,#D9B28C,#D98CB2,#8CD9D9,#8C8CD9,#D98CD9"}}}}%% timeline title History of Social Media Platform 2002 : LinkedIn 2004 : Facebook : Google 2005 : Youtube 2006 : Twitter


Sankey

A sankey diagram…

[mermaid] sankey-beta Agricultural 'waste',Bio-conversion,124.729 Bio-conversion,Liquid,0.597 Bio-conversion,Losses,26.862 Bio-conversion,Solid,280.322 Bio-conversion,Gas,81.144 Biofuel imports,Liquid,35 Biomass imports,Solid,35 Coal imports,Coal,11.606 Coal reserves,Coal,63.965 Coal,Solid,75.571 [end]

The above produces this diagram…


%%{init:{"theme":"base","themeVariables":{"fontFamily":"Segoe UI,SegoeUI,Helvetica Neue,Helvetica,Arial,Tahoma","primaryColor":"#202020","secondaryColor":"#400000","tertiaryColor":"#002040","lineColor":"#e0e0e0","primaryTextColor":"#ffffff","primaryBorderColor":"#407FBF","xyChart": {"backgroundColor": "#202020","titleColor": "#ffffff","xAxisLabelColor": "#8CB2D9","xAxisTitleColor": "#8CB2D9","xAxisTickColor": "#8CB2D9","xAxisLineColor": "#8CB2D9","yAxisLabelColor": "#8CD98C","yAxisTitleColor": "#8CD98C","yAxisTickColor": "#8CD98C","yAxisLineColor": "#8CD98C","plotColorPalette": "#D9D98C,#D98C8C,#B28CD9,#D9B28C,#D98CB2,#8CD9D9,#8C8CD9,#D98CD9"}}}}%% sankey-beta Agricultural 'waste',Bio-conversion,124.729 Bio-conversion,Liquid,0.597 Bio-conversion,Losses,26.862 Bio-conversion,Solid,280.322 Bio-conversion,Gas,81.144 Biofuel imports,Liquid,35 Biomass imports,Solid,35 Coal imports,Coal,11.606 Coal reserves,Coal,63.965 Coal,Solid,75.571


X-Y Chart

An X-Y chart…

[mermaid] xychart-beta title "Sales Revenue" x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] y-axis "Revenue (in $)" 4000 --> 11000 bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] [end]

The above produces this chart…


%%{init:{"theme":"base","themeVariables":{"fontFamily":"Segoe UI,SegoeUI,Helvetica Neue,Helvetica,Arial,Tahoma","primaryColor":"#202020","secondaryColor":"#400000","tertiaryColor":"#002040","lineColor":"#e0e0e0","primaryTextColor":"#ffffff","primaryBorderColor":"#407FBF","xyChart": {"backgroundColor": "#202020","titleColor": "#ffffff","xAxisLabelColor": "#8CB2D9","xAxisTitleColor": "#8CB2D9","xAxisTickColor": "#8CB2D9","xAxisLineColor": "#8CB2D9","yAxisLabelColor": "#8CD98C","yAxisTitleColor": "#8CD98C","yAxisTickColor": "#8CD98C","yAxisLineColor": "#8CD98C","plotColorPalette": "#D9D98C,#D98C8C,#B28CD9,#D9B28C,#D98CB2,#8CD9D9,#8C8CD9,#D98CD9"}}}}%% xychart-beta title "Sales Revenue" x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] y-axis "Revenue (in $)" 4000 --> 11000 bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]


Block Diagram

A block diagram…

[mermaid] block-beta columns 1 db(("DB")) blockArrowId6<["&nbsp;&nbsp;&nbsp;"]>(down) block:ID A B["A wide one in the middle"] C end space D ID --> D C --> D style B fill:#969,stroke:#333,stroke-width:4px [end]

The above produces this diagram…


%%{init:{"theme":"base","themeVariables":{"fontFamily":"Segoe UI,SegoeUI,Helvetica Neue,Helvetica,Arial,Tahoma","primaryColor":"#202020","secondaryColor":"#400000","tertiaryColor":"#002040","lineColor":"#e0e0e0","primaryTextColor":"#ffffff","primaryBorderColor":"#407FBF","xyChart": {"backgroundColor": "#202020","titleColor": "#ffffff","xAxisLabelColor": "#8CB2D9","xAxisTitleColor": "#8CB2D9","xAxisTickColor": "#8CB2D9","xAxisLineColor": "#8CB2D9","yAxisLabelColor": "#8CD98C","yAxisTitleColor": "#8CD98C","yAxisTickColor": "#8CD98C","yAxisLineColor": "#8CD98C","plotColorPalette": "#D9D98C,#D98C8C,#B28CD9,#D9B28C,#D98CB2,#8CD9D9,#8C8CD9,#D98CD9"}}}}%% block-beta columns 1 db(("DB")) blockArrowId6<["   "]>(down) block:ID A B["A wide one in the middle"] C end space D ID --> D C --> D style B fill:#969,stroke:#333,stroke-width:4px


Opening Charts in a New Tab

In the upper-right corner of the chart, you will see a magnifying glass icon. Clicking on this icon will open a copy of the chart in a new browser tab.

Try it now, using any of the charts above.

Using MiniCalc

As an alternative to the [mermaid] tag, Sage also offers the [diagram] tag, which uses MiniCalc to build a diagram, using a fluent API.

For example…

[diagram] @NewDSGraph() .LeftToRight .SetCurveShape(@TDSGraphCurveShape.Linear) .Node(n1, 'Apple', @TDSGraphNodeShape.Hexagon) .Node(n2, 'Banana', @TDSGraphNodeShape.Circle) .Node(n3, 'Cherry', @TDSGraphNodeShape.Oval) .Link(n1, n2).Arrow(@TDSGraphLinkArrow.Arrow) .Link(n2, n3).Arrow(@TDSGraphLinkArrow.DoubleArrow) [end]

The above produces…


%%{init:{"flowchart":{"curve":"linear"},"theme":"base","themeVariables":{"fontFamily":"Segoe UI,SegoeUI,Helvetica Neue,Helvetica,Arial,Tahoma","primaryColor":"#202020","secondaryColor":"#400000","tertiaryColor":"#002040","lineColor":"#e0e0e0","primaryTextColor":"#ffffff","primaryBorderColor":"#407FBF","xyChart": {"backgroundColor": "#202020","titleColor": "#ffffff","xAxisLabelColor": "#8CB2D9","xAxisTitleColor": "#8CB2D9","xAxisTickColor": "#8CB2D9","xAxisLineColor": "#8CB2D9","yAxisLabelColor": "#8CD98C","yAxisTitleColor": "#8CD98C","yAxisTickColor": "#8CD98C","yAxisLineColor": "#8CD98C","plotColorPalette": "#D9D98C,#D98C8C,#B28CD9,#D9B28C,#D98CB2,#8CD9D9,#8C8CD9,#D98CD9"}}}}%% graph LR n0{{Apple}} --> n1((Banana)) n1 <--> n2([Cherry])


One significant advantage is that the [diagram] tag is theme-aware, using the StyleDark and StyleLight methods. For example…

[diagram] @NewDSGraph() .LeftToRight .SetCurveShape(@TDSGraphCurveShape.Linear) .Node(n1, 'Apple', @TDSGraphNodeShape.Hexagon) .Node(n2, 'Banana', @TDSGraphNodeShape.Circle) .Node(n3, 'Cherry', @TDSGraphNodeShape.Oval) .StyleDark('fill:red,color:yellow') .StyleLight('fill:yellow,color:black') .Link(n1, n2) .Arrow(@TDSGraphLinkArrow.Arrow) .StyleDark('stroke:cyan') .StyleLight('stroke:blue') .Link(n2, n3) .Arrow(@TDSGraphLinkArrow.DoubleArrow) .Style(@TDSGraphLineStyle.Dotted) [end]

The above produces this…


%%{init:{"flowchart":{"curve":"linear"},"theme":"base","themeVariables":{"fontFamily":"Segoe UI,SegoeUI,Helvetica Neue,Helvetica,Arial,Tahoma","primaryColor":"#202020","secondaryColor":"#400000","tertiaryColor":"#002040","lineColor":"#e0e0e0","primaryTextColor":"#ffffff","primaryBorderColor":"#407FBF","xyChart": {"backgroundColor": "#202020","titleColor": "#ffffff","xAxisLabelColor": "#8CB2D9","xAxisTitleColor": "#8CB2D9","xAxisTickColor": "#8CB2D9","xAxisLineColor": "#8CB2D9","yAxisLabelColor": "#8CD98C","yAxisTitleColor": "#8CD98C","yAxisTickColor": "#8CD98C","yAxisLineColor": "#8CD98C","plotColorPalette": "#D9D98C,#D98C8C,#B28CD9,#D9B28C,#D98CB2,#8CD9D9,#8C8CD9,#D98CD9"}}}}%% graph LR n0{{Apple}} --> n1((Banana)) n1 <-.-> n2([Cherry]) style n2 fill:red,color:yellow linkStyle 0 stroke:cyan;


Toggle the Sage theme to see the full effect.

Sage Links in Diagrams

You can include links to Sage content in Mermaid diagrams. This can be useful to break a large diagram into smaller pieces (which link to one another), or to make a diagram that has links to other articles.

Note

Links are only supported in flowcharts and block diagrams.


In a [mermaid] or [diagram] tag, Sage links use the <<Sage:…>> syntax…

[mermaid] graph LR A(<<Sage:/DSUtilOverview|Utility>>) --> B(<<Sage:/VDB>>); B --> C(<<Sage:/Ginkgo>>) C --> D(<<Sage:/InstallDelphi|Delphi>>); [end]

Above, there are four links, producing this diagram…


%%{init:{"theme":"base","themeVariables":{"fontFamily":"Segoe UI,SegoeUI,Helvetica Neue,Helvetica,Arial,Tahoma","primaryColor":"#202020","secondaryColor":"#400000","tertiaryColor":"#002040","lineColor":"#e0e0e0","primaryTextColor":"#ffffff","primaryBorderColor":"#407FBF","xyChart": {"backgroundColor": "#202020","titleColor": "#ffffff","xAxisLabelColor": "#8CB2D9","xAxisTitleColor": "#8CB2D9","xAxisTickColor": "#8CB2D9","xAxisLineColor": "#8CB2D9","yAxisLabelColor": "#8CD98C","yAxisTitleColor": "#8CD98C","yAxisTickColor": "#8CD98C","yAxisLineColor": "#8CD98C","plotColorPalette": "#D9D98C,#D98C8C,#B28CD9,#D9B28C,#D98CB2,#8CD9D9,#8C8CD9,#D98CD9"}}}}%% graph LR A(Utility) --> B(VDB); B --> C(Ginkgo) C --> D(Delphi);


As this example shows, the optional link caption comes after the link URL, separated by a pipe character.

Implicitly, these links correspond to the [link] and [link/] tags. To use [mlink], [ref], and [mref] tags, specify the tag name before the link itself, as follows…

[mermaid] graph LR A(<<Sage:/DSUtilOverview|Utility>>) --> B(<<Sage:/VDB>>); B --> C(<<Sage:mlink:/Ginkgo>>) C --> D(<<Sage:/InstallDelphi|Delphi>>); [end]

The above produces this diagram…


%%{init:{"theme":"base","themeVariables":{"fontFamily":"Segoe UI,SegoeUI,Helvetica Neue,Helvetica,Arial,Tahoma","primaryColor":"#202020","secondaryColor":"#400000","tertiaryColor":"#002040","lineColor":"#e0e0e0","primaryTextColor":"#ffffff","primaryBorderColor":"#407FBF","xyChart": {"backgroundColor": "#202020","titleColor": "#ffffff","xAxisLabelColor": "#8CB2D9","xAxisTitleColor": "#8CB2D9","xAxisTickColor": "#8CB2D9","xAxisLineColor": "#8CB2D9","yAxisLabelColor": "#8CD98C","yAxisTitleColor": "#8CD98C","yAxisTickColor": "#8CD98C","yAxisLineColor": "#8CD98C","plotColorPalette": "#D9D98C,#D98C8C,#B28CD9,#D9B28C,#D98CB2,#8CD9D9,#8C8CD9,#D98CD9"}}}}%% graph LR A(Utility) --> B(VDB); B --> C(Ginkgo) C --> D(Delphi);


Above, the link to Ginkgo uses [mlink] instead of [link]. The full set of choices is: link, mlink, ref, and mref (link is the default).

To summarize, the syntax is as follows…


<<Sage:[<verb>:]<link>[<caption>]>>


Above, the optional <verb> is one of these: link, mlink, ref, and mref; the required <link> is the Sage link; and the optional <caption> is the link caption.

See Also

Last Modified: 10/24 10:44:32 am
In this article (top)  View article's Sage markup
10/24 10:44:32 am