Blog RSS Feed

Test Markdown to UML
By:
02 Jul 2016

Basic reference for Markdown documentation with: - kramdown extentions - UML/Flow diagrams

References:

  • Kramdown [http://kramdown.gettalong.org/quickref.html]
  • UML diagrams [http://bramp.github.io/js-sequence-diagrams/]
  • Flow charts [http://adrai.github.io/flowchart.js/]

Markdown Extra

StackEdit supports Markdown Extra, which extends Markdown syntax with some nice features.

Tip: You can disable any Markdown Extra feature in the Extensions tab of the Settings dialog.

Note: You can find more information about Markdown syntax here and Markdown Extra extension here.

Tables

Markdown Extra has a special syntax for tables:

Item Value
Computer $1600
Phone $12
Pope $1

You can specify column alignment with one or two colons:

Item Value Qty
Computer $1600 5
Phone $12 12
Pipe $1 234
Default aligned Left aligned Center aligned Right aligned
First body part Second cell Third cell fourth cell
Second line foo strong baz
Third line quux baz bar
Second body      
2 line      
Footer row      
Header1 Header2 Header3
cell1 cell2 cell3
cell4 cell5 cell6
cell1 cell2 cell3
cell4 cell5 cell6
Foot1 Foot2 Foot3

Definition Lists

Markdown Extra has a special syntax for definition lists too:

Term 1
Term 2
Definition A
Definition B
Term 3

Definition C

Definition D

part of definition D

Fenced code blocks

GitHub’s fenced code blocks are also supported with Highlight.js syntax highlighting:

// Foo
var bar = 0;

Tip: To use Prettify instead of Highlight.js, just configure the Markdown Extra extension in the Settings dialog.

Note: You can find more information:

  • about Prettify syntax highlighting here,
  • about Highlight.js syntax highlighting here.

Footnotes

You can create footnotes like this1.

SmartyPants

SmartyPants converts ASCII punctuation characters into “smart” typographic punctuation HTML entities. For example:

  ASCII HTML
Single backticks 'Isn't this fun?' ‘Isn’t this fun?’
Quotes "Isn't this fun?" “Isn’t this fun?”
Dashes -- is en-dash, --- is em-dash – is en-dash, — is em-dash

Table of contents

You can insert a table of contents using the marker [TOC]:

  1. Markdown Extra
    1. Tables
    2. Definition Lists
    3. Fenced code blocks
    4. Footnotes
    5. SmartyPants
    6. Table of contents
    7. UML diagrams

UML diagrams

You can also render sequence diagrams like this:

Alice->Bob: Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!
 Alice->Bob: Hello Bob, how are you?
 Note right of Bob: Bob thinks
 Bob-->Alice: I am good thanks!
Alice->Bob: Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!

And flow charts like this:

 st=>start: Start
 e=>end
 op=>operation: My Operation
 cond=>condition: Yes or No?

 st->op->cond
 cond(yes)->e
 cond(no)->op
st=>start: Start
e=>end
op=>operation: My Operation
cond=>condition: Yes or No?

st->op->cond
cond(yes)->e
cond(no)->op

Note: You can find more information:

  • about Sequence diagrams syntax here,
  • about Flow charts syntax here.
  1. Here is the text of the footnote.