The first thing you should know

PlantUML is a really awesome way to create diagrams by writing code instead of drawing and dragging visual elements. Markdown is a really nice documentation tool. Here's how I combine the two, to create docs with embedded diagrams. ```ruby require 'redcarpet' markdown = Redcarpet.new('Hello World!' ) puts markdown.tohtml ``` We use Linguist to perform language detection and to select third-party grammars for syntax highlighting. You can find out which keywords are valid in the languages YAML file. Further reading. GitHub Flavored Markdown Spec 'Basic writing. In this video you'll learn how to use PlantUML within a GitLab wiki, to provide a collaborative way to create diagrams and keep them up to date.

GitHub Flavored Markdown GitHub.com uses its own version of the Markdown syntax that provides an additional set of useful features, many of which make it easier to work with content on GitHub.com. Note that some features of GitHub Flavored Markdown are only available in the descriptions and comments of Issues and Pull Requests. Markdown extension for PlantUML and Nikola. Renders PlantUML files from Nikola. JSDoc plugin to use PlantUML inside javascript documentation. Simple tool to turn a swagger api spec into a uml class diagram. Convert OpenAPI specifications to PlantUML diagrams. Generate UML Diagrams for Given Swagger Definition. Use it with LyX.

What every Markdwon user should know is the official version. How was it created? What is its design philosophy and grammar? If you haven't seen it, it is recommended to check out this: Markdown syntax guide full version.

The syntax used by MWeb is Github Flavored Markdown (GFM) syntax. GFM is an extended version of the official version. In addition to supporting the official syntax, it also supports tables, TOC, LaTeX, code blocks, task lists, footnotes, and more.

In addition, MWeb also supports two more useful grammars based on GFM grammar compatibility: drawing support (mermaid, viz, echarts, plantuml, sequence, flow) and setting the image width, which will be explained in detail below.

Philosophy

Markdown is intended to be as easy-to-read and easy-to-write as is feasible.
Readability, however, is emphasized above all else. A Markdown-formatted document should be publishable as-is, as plain text, without looking like it's been marked up with tags or formatting instructions.
Markdown's syntax is intended for one purpose: to be used as a format for writing for the web.

Notice

If you see writing Result:, you can see the result only by using CMD + 4 or CMD + R preview in MWeb. You can download this post and open it in MWeb to see the result. The download URL is: Download this post Markdown text

Headers

Example:

Result:

This is an <h2> tag

This is an <h6> tag

Emphasis

Example:

Shortcuts:CMD + U、CMD + I、CMD + B
Result:

This text will be italic
This will also be italic

This text will be bold
This will also be bold

Newlines

End a line with two or more spaces + enter.
Just typing enter to newline,please set：Preferences - Themes - Translate newlines to <br> tags enable ( default is enable )

Lists

Unordered

Example:

Shortcuts:Option + U
Result:

• Item 1 unordered list * + SPACE
• Item 2
  • Item 2a unordered list TAB + * + SPACE
  • Item 2b

Ordered

Example:

Result:

1. Item 1 ordered list Number + . + SPACE
2. Item 2
3. Item 3
   1. Item 3a ordered list TAB + Number + . + SPACE
   2. Item 3b

Task lists

Example:

Result:

• task one not finish - + SPACE + [ ]
• task two finished - + SPACE + [x]

Images

Example:

Shortcuts:Control + Shift + I
The Library's document support drag & drop or CMD + V paste or CMD + Option + I to insert the pictrue.
Result:

In MWeb, you can use -w + Number to control image width, for example, set the image width 140px:

In MWeb, you can also set the alignment of the image. Take the above image as an example. The left alignment is -l140, the center is -c140, and the right is -r140.

Links

Example:

Shortcuts:Control + Shift + L
The Library's document support drag & drop or CMD + Option + I to insert attachment.
Result:

An email example@example.com link.
GitHub
Automatic linking for URLs
Any URL (like http://www.github.com/) will be automatically converted into a clickable link.

Blockquotes

Example:

Shortcuts:CMD + Shift + B
Result:

As Kanye West said:

We're living the future so
the present is our past.

Inline code

Example:

Shortcuts:CMD + K
Result:

I think you should use an
<addr>code element here instead.

Multi-line code

Example:

Shortcuts:CMD + Shift + K
Result:

MWeb Drawing

mermaid

Mermaid is a popular js graphics library. It supports flowcharts, sequence diagrams and Gantt charts. Its official website is: https://mermaidjs.github.io/. The syntax for using mermaid in MWeb is to declare code blocks. The language is mermaid, and the mermaid drawing syntax can be written in the code block. You can copy the following syntax into MWeb to view the result.

Aw4 transmission. Result：

Graphviz

Graphviz is an open source graph visualization software and its official website is http://www.graphviz.org/. MWeb uses the implementation of Graphviz's js version http://viz-js.com/, which can parse the Graphviz syntax to generate images. You can try the following syntax to copy it into MWeb. When you try, you can change the dot to circo, fdp, neato, osage, twopi to try the result.

Result：

echarts

Echarts is a js graph library of Baidu. Its website is http://echarts.baidu.com/index.html. It is very powerful. MWeb supports some basic usages of echarts. You can try the following syntax to copy it into MWeb. free. software download website for pc. You can also go to the http://echarts.baidu.com/examples/index.html URL to see some examples. Note that MWeb can only parse option = {} which is simple but should be enough used.

Result：

plantuml

The website of plantuml is: http://www.plantuml.com/, you can learn more directly. The way MWeb supports plantuml is to reference the images generated by the plantuml server. You can copy the following syntax into MWeb to try.

Result:

Sequence diagram and flow chart

The sequence diagram and flow chart are using http://bramp.github.io/js-sequence-diagrams/, http://adrai.github.io/flowchart.js/ It's Markdown syntax in MWeb.

Result：

Tables

Example:

You can create tables by assembling a list of words and dividing them with hyphens - (for the first row), and then separating each column with a pipe |:

Plantuml Markdown Vscode

Result:

Markdown Editor With Plantuml

First Header	Second Header
Content from cell 1	Content from cell 2
Content in the first column	Content in the second column

Strikethrough

Example:

Result:

Any word wrapped with two tildes (like this) will appear crossed out.

Horizontal Rules

Github Markdown Plantuml

Following lines will produce a horizontal rule:

Result:

Github Plantuml Plugin

MathJax

Use double US dollors sign pair for Block level Math formula, and one US dollor sign pair for Inline Level.

Result:

For example this is a Block level [x = {-b pm sqrt{b^2-4ac} over 2a}] formula, and this is an inline Level (x = {-b pm sqrt{b^2-4ac} over 2a}) formula.

[ frac{1}{Bigl(sqrt{phi sqrt{5}}-phiBigr) e^{frac25 pi}} =
1+frac{e^{-2pi}} {1+frac{e^{-4pi}} {1+frac{e^{-6pi}}
{1+frac{e^{-8pi}} {1+ldots} } } } ]

Footnote

Example:

Result: Bittorrent 64 bit for windows 10.

This is a footnote:¹

Comment And Read More.

Actions->Insert Read More Comment ORCMD + .

TOC

Example:

Result:

This is an <h1> tag

• This is an <h2> tag
• Lists
• MWeb Drawing