|
|
flowchart specs |
|
|
\ Нет новой строки в конце файла |
|
|
All Flowcharts are composed of nodes, the geometric shapes and edges, the arrows or lines. The mermaid code defines the way that these nodes and edges are made and interact.
|
|
|
|
|
|
To create flowchart call static `Create` method as follows:
|
|
|
```c#
|
|
|
var chart = FlowChart.Create(Orientation.TopToBottom);
|
|
|
var cat = chart.TextNode("Cat", Shape.Circle);
|
|
|
var dog = chart.TextNode("Dog", Shape.Trapezoid);
|
|
|
chart.Link(cat, dog, Link.Open, "hates");
|
|
|
|
|
|
string mermaidSyntax = chart.Render();
|
|
|
```
|
|
|
|
|
|
## Defining nodes
|
|
|
Flowchart only support text nodes. To create a text node call `TextNode` method and pass a title (optional) and node shape type
|
|
|
```c#
|
|
|
var cat = chart.TextNode("Cat", Shape.Circle);
|
|
|
var dog = chart.TextNode("Dog", Shape.Trapezoid);
|
|
|
```
|
|
|
|
|
|
## Creating subgraphs
|
|
|
To create a subgraph call `SubGraph` method of chart with specific title (optional) and orientation
|
|
|
```c#
|
|
|
var house = chart.SubGraph("House", Orientation.TopToBottom);
|
|
|
```
|
|
|
|
|
|
Subgraphs also have methods to create inner subgraphs, nodes, etc.
|
|
|
```c#
|
|
|
var kitchen = house.TextNode("Kitchen", Shape.RoundEdges);
|
|
|
var bedroom = house.TextNode("Bedroom", Shape.RoundEdges);
|
|
|
```
|
|
|
|
|
|
## Linking
|
|
|
To link nodes or subgraphs use `Link` method of chart or subgraphs with link members, link style and text (optional)
|
|
|
```c#
|
|
|
chart.Link(cat, kitchen, Link.Open, "prefers");
|
|
|
chart.Link(dog, bedroom, Link.Cross, "not allowed");
|
|
|
```
|
|
|
|
|
|
## Interaction
|
|
|
Supported interactions:
|
|
|
1. Call function on click
|
|
|
2. Make function call on click
|
|
|
3. Set hyperlink for nodes
|
|
|
|
|
|
### Call function on click
|
|
|
To call function on node click use `OnClick` method of `chart.Interaction` property
|
|
|
Example: show cat node id to user
|
|
|
```c#
|
|
|
chart.Interaction.OnClick(cat, "alert", "my tooltip");
|
|
|
```
|
|
|
|
|
|
### Make function call on click
|
|
|
To make custom function call on click use `OnClickCall` method of `chart.Interation` property
|
|
|
Example: say "meow" to user when clicking cat node
|
|
|
```c#
|
|
|
chart.Interaction.OnClickCall(cat, "alert(\"meow\")", "tooltip");
|
|
|
```
|
|
|
|
|
|
### Set hyperlink for nodes
|
|
|
To add hyperlink to a node use `Hyperlink` method of `chart.Interaction` property
|
|
|
Example: open GitHub in new tab when clicking cat node
|
|
|
```c#
|
|
|
chart.Interaction.Hyperlink(cat, new Uri("https://github.com"), "tooltip", HyperlinkTarget.Blank);
|
|
|
```
|
|
|
|
|
|
## Styling
|
|
|
Supported styling:
|
|
|
1. Define default node style
|
|
|
2. Define and set specific CSS class to a node
|
|
|
3. Set node style with CSS
|
|
|
|
|
|
### Define default node style
|
|
|
To define default node style use `DefaultStyle` property of `chart.Styling` property
|
|
|
```c#
|
|
|
chart.Styling.DefaultStyle = "color:pink,background-color:black";
|
|
|
```
|
|
|
|
|
|
### Set css class to a node
|
|
|
To define and set specific CSS class for specific node use `AddClass`/`SetClass` methods of `chart.Styling` property
|
|
|
```c#
|
|
|
var myClass = chart.Styling.AddClass("color:#bff");
|
|
|
chart.Styling.SetClass(kitchen, myClass);
|
|
|
```
|
|
|
|
|
|
### Set node style with CSS
|
|
|
To set node style with css use `Set` method of `chart.Styling` property
|
|
|
```c#
|
|
|
chart.Styling.Set(cat, "fill: #bff");
|
|
|
``` |
|
|
\ Нет новой строки в конце файла |