Diagram examples

Enabled by these Jekyll plugins:

graphviz

Graphviz online editor

graphviz-b4e2f7e1c0647b532ad6df1c60aefd0a digraph { node [shape=circle, style=filled]; S [fillcolor=green]; A [fillcolor=yellow]; B [fillcolor=yellow]; C [fillcolor=yellow]; D [shape=doublecircle, fillcolor=green]; S -> A [label=a]; S -> B [label=b]; A -> D [label=c]; B -> D [label=d]; } %3 S S A A S->A a B B S->B b D D A->D c B->D d C C

emojis

I give this plugin two!

Emojis

table

  • Cells spanning multiple rows
Stage Direct Products ATP Yields
Glycolysis
2 ATP
2 NADH 3–5 ATP
Pyruvaye oxidation 2 NADH 5 ATP
Citric acid cycle

2 ATP
6 NADH 15 ATP
2 FADH 3 ATP
30–32 ATP
Easy Multiline
Apple
Apple
Apple		 Banana
Banana
Banana		 Orange
Orange
Orange
Apple
Apple		 Banana
Banana		 Orange
Orange
Apple Banana Orange
  • Table header not required
♜   ♝ ♛ ♚ ♝ ♞ ♜
  ♟ ♟ ♟   ♟ ♟ ♟
♟   ♞          
  ♗     ♟      
        ♙      
          ♘    
♙ ♙ ♙ ♙   ♙ ♙ ♙
♖ ♘ ♗ ♕ ♔     ♖
  • Cells spanning multiple columns
  • Cells text align separately
Fruits || Food
Apple
Banana
Orange		 Apple
Banana
Orange		 Apple
Banana
Orange
Rowspan is 4
A. Peach
B. Orange
C. Banana		 How’s it?
  1. Fine
  2. Bad
It’s OK!
  • make markown syntax possible inside a cell
MathJax || Image
Apple
Banana
Orange		 Apple
Banana
Orange		 Apple
Banana
Orange
Rowspan is 4
A. Peach
B. Orange
C. Banana		 How’s it?
  1. example
  2. $I = \int \rho R^{2} dV$
It’s OK!

See more features at spaceship-table-usage

math

$ a * b = c ^ b $

$ 2^{\frac{n-1}{3}} $

$ \int_a^b f(x)\,dx. $

mermaid

Mermaid online editor

plantuml

PlantUML language specification PlantUML online editor

1

2

3

4

5

6

7

8

9

10

math in uml