Online Markdown | WYSIWYG

DEMO

![image](https://tuguoba.com/src/site_logo.png)
<img width="100" height="100" src="https://tuguoba.com/src/site_logo.png">

# GFM Markdown
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6
`using for line wrap`

code block
```js
console.log("fenced code block");
```
<pre>**HTML block**</pre>
* list
 * list indented
1. ordered
2. list
 1. ordered list
 2. indented

- [ ] task
- [x] list completed

[link](https://tuguoba.com)
> block quote
---
horizontal line
***
`code`, *italic*, **bold**, ~~strikethrough~~, Red color

# Table Cell Merge

| @cols=2:merged |
| --- | --- |
| table | table |

# Charts

> You can choose options from below table

| bar | column | line | area | pie |
| --- | ------ | ---- | ---- | --- |
| @cols=5:legend.align: top, bottom, left, right legend.visible: true |
| @cols=2:series.stackType: normal, percent series.diverging: true xAxis.align: center yAxis.align: center | @cols=2:series.spline: true series.stackType: normal series.zoomable: true xAxis.tickInterval: auto series.shifting: true series.areaOpacity: 0.3 | series.labelAlign: outer, center series.radiusRange: ["40%", "100%"] series.radiusRange: ["50%"] series.startAngle: -90 series.endAngle: 90 |

* * *
### For column/bar chart
 
$$chart
,Budget,Income,Expenses,Debt
June,5000,8000,4000,6000
July,3000,1000,4000,3000
Aug,5000,7000,6000,3000
Sep,7000,2000,3000,1000
Oct,6000,5000,4000,2000
Nov,4000,3000,5000,4000

type: column
series.stackType: percent
title: Monthly Revenue
width: 465
x.title: Amount
y.title: Month
y.suffix: $
legend.visible: false
$$

* * *
### For line/area chart
 
$$chart
,Seoul, Seattle, Sydney, Moskva, Jungfrau
01/01/2016, -3.5, -1.1, 4.0, 11.3, 17.5
02/01/2016, 3.8, 5.6, 7.0, 9.1, 12.4
03/01/2016, 3.1, 22.0, 20.9, 18.3, 15.2
04/01/2016, -4.3, -9.1, -4.1, 4.4, 12.2
05/01/2016, -6.2, -13.7, -13.1, -10.3, -6.1

type: line
title: 24-hr Average Temperature
width: 600
x.title: Month
y.title: Temperature (Celsius)
xAxis.pointOnColumn: true
xAxis.dateFormat: MMM
xAxis. tickInterval: auto
series.showDot: false
series.zoomable: true
tooltip.suffix: °C
series.spline: true
$$

$$chart
,Budget,  Income, Expenses, Debt
June, 5000, 8000, 4000, 3000
July, 3000, 4000, 4000, 4000
Aug, 5000, 7000, 6000, 3000
Sep, 7000, 2000, 3000, 1000
Oct, 6000, 6000, 4000, 2000
Nov, 4000, 3000, 5000, 4000
Dec, 1000, 5000, 7000, 3000

type: area
title:Monthly Revenue
format: 1,000
width: 600
height: 540
xAxis.title: Month
yAxis.title: Amount
yAxis.max: 24000
yAxis.pointOnColumn: true
series.stackType: normal
series.showDot: false
series.areaOpacity: 1
$$

# UML
**Get more [uml](https://real-world-plantuml.com/) sample**

$$uml
class BaseClass

namespace net.dummy #DDDDDD {
 .BaseClass <|-- Person
 Meeting o-- Person

.BaseClass <|- Meeting
}

namespace net.foo {
 net.dummy.Person <|- Person
 .BaseClass <|-- Person

net.dummy.Meeting o-- Person
}

BaseClass <|-- net.unused.Person
$$

$$uml
partition Conductor {
  (*) --> "Climbs on Platform"
  --> === S1 ===
  --> Bows
}

partition Audience #LightSkyBlue {
  === S1 === --> Applauds
}

partition Conductor {
  Bows --> === S2 ===
  --> WavesArmes
  Applauds --> === S2 ===
}

partition Orchestra #CCCCEE {
  WavesArmes --> Introduction
  --> "Play music"
}
$$

GUIDE

Editor

Don't forget to download your files. They will be discarded automatically after 24 hours.

View

PDF view

mail sharing

Editor

Preview