Mark down drawing syntax

Source: Internet
Author: User

The following syntax is tested in NetEase cloud notes.

The marker position of the drawing is three single quotation mark ' start ', note the single quotation mark of the English half angle, and the following characters are correct in the English half-angle state.

Sogou Input method to pay special attention, remember shift switch in English shortcut keys changed, otherwise painful death.

The following is the MD code

```

Graph LR
A ((a This is round))-.-> B
B{b This is the text inserted by the diamond}==>| |c
C==>f> This is the flag type]
Node--text-to-node B
```

Graph--keyword does not explain
TB-top to bottom from top to bottom
BT-Bottom to top bottom-up
LR-Left to right
RL--Right to left

Node-->| Word on the connection line | Node

-.-> Dashed lines

---a line without arrows
= = Line of the bold body

>TEXT] Flag Type
[Text] Rectangle
(text) Rounded Rectangle
((text)) round
{text} Diamond


If special characters are encountered, enter quotation marks to mark

For example


```
Graph LR
A["a leader (colon): #quot;"]-->b["a heart: #9829;"]

```

Next is the subreport is more keyword subgraph

```
Graph TB
Subgraph One
A1-->a2
End
Subgraph
B1-->b2
End
Subgraph Three
C1-->c2
End
C1-->a2
A1==>b2
B1-.->c2

```


Callback events after clicking on a node

<script>
var callback = function () {
Alert (' callback function ' is triggered. ‘);
}
<script>

```
Graph LR;
a-->b;
Click A Callback "Test callback function"
Click B "Http://www.sci99.com" "Tap will jump to page"

```

Calling CSS Styles
```
Graph LR
ID1 (Start)-->id2 (Stop)
Style ID1 fill: #f9f, stroke: #333, stroke-width:4px;
Style Id2 fill: #ccf, stroke: #f66, Stroke-width:2px,stroke-dasharray:5, 5;
```


```
Graph LR
A[hard Edge]-->| Link text| B (Round Edge)
B--C{decision}
C-->| one| D[result One]
C-->| two| E[result)

```

Mark down drawing syntax

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.