Logo
Color-Of-Code
  Home   All tags   Terms and Conditions

Test

January 03, 2019

Test

Plantuml

AliceAliceBobBobAuthentication RequestAuthentication ResponseAnother authentication RequestAnother authentication Response

remark-draw

dot

Examples taken from the DOT pocket reference

Example 1: Simple Graph

%3 a a b b a--b c c a--c b--c d d d--c e e e--a e--c

Example 2: K6

%3 a a b b a--b c c a--c d d a--d e e a--e f f a--f b--c b--d b--e b--f c--d c--e c--f d--e d--f e--f

Example 3: Simple Digraph

%3 a a b b a->b c c b->c d d c->d d->a

Example 4: Full Digraph

%3 a a b b a->b 0.2 c c a->c 0.4 c->b 0.6 e e c->e 0.6 e->b 0.7 e->e 0.1

Example 5: Showing A Path

%3 a a b b a--b d d a--d c c b--c b--d c--d f f c--f e e d--e e--f

Note that there's also a shorthand method as follows:

%3 a a b b a--b d d a--d b--d c c b--c d--c e e d--e f f c--f e--f

Example 6: Sub-graphs

Please note there are some quirks here, First the name of the sub-graphs are important, to be visually separated they must be prefixed with cluster_ as shown below, and second only the DOT and FDP layout methods seem to support sub-graphs (See the graph generation page for more information on the layout methods)

%3 cluster_0 Subgraph A cluster_1 Subgraph B a a b b a->b f f a->f c c b->c d d c->d f->c

Another Example of a sub-graph, In this example I group nodes together separately from their edges, And also uses the graph attribute splines=line; to specify that edges should be drawn only as straight lines, no curves allowed.

%3 cluster_0 Subgraph A cluster_1 Subgraph B a a d d a--d e e a--e b b b--d b--e c c c--d c--e

Example 7: Large Graphs

To make it easier to input large graph descriptions, One may group edges together with a set of braces, It may also help to lay the graph out left to right instead of top to bottom.

%3 a a b b a--b c c a--c d d a--d b--c e e b--e c--e f f c--f d--f g g d--g h h e--h f--g f--h i i f--i j j f--j k k g--k o o h--o l l h--l i--j i--l m m i--m j--k j--m n n j--n k--n r r k--r p p o--p s s o--s l--o l--m m--o m--n m--p n--r q q n--q t t r--t p--q p--s p--t q--r q--t z z s--z t--z

Another feature that can make large graphs manageable is to group nodes together at the same rank, the graph above for example is copied from a specific assignment, but doesn't look the same because of how the nodes are shifted around to fit in a more space optimal, but less visually simple way. We can make it look much more similar by grouping the nodes together for display as is done in the assignment with rank, as follows

%3 a a b b a--b c c a--c d d a--d b--c e e b--e c--e f f c--f d--f g g d--g h h e--h f--g f--h i i f--i j j f--j k k g--k o o h--o l l h--l i--j i--l m m i--m j--k j--m n n j--n k--n r r k--r p p o--p s s o--s l--o l--m m--o m--n m--p n--r q q n--q t t r--t p--q p--s p--t q--r q--t z z s--z t--z

mermaid

Gantt

2014-01-072014-01-092014-01-112014-01-132014-01-152014-01-172014-01-192014-01-21Completed task Active task Future task Future task2 A sectionAdding GANTT diagram to mermaid

sequenceDiagram

JohnBobAliceJohnBobAliceloop[Healthcheck]Rational thoughts prevail...Hello John, how are you?Fight against hypochondriaGreat!How about you?Jolly good!

classDiagram

Cool
Where am i?
Cool label
Class01
int chimp
int gorilla
size()
AveryLongClass
Class03
Class04
Class05
Class06
Class07
Object[] elementData
equals()
Class08
Class09
C2
C3

gitGraph

mainc2b1b2feat(api): ...abfix(client): .extra long label..feat(modules): ...test(client): ...fix(api): ...ci: ...8-0a2da939-1c4c5d6

remark-flowchart

st=>start: Start:>http://www.google.com[blank] e=>end:>http://www.google.com op1=>operation: My Operation sub1=>subroutine: My Subroutine cond=>condition: Yes or No?:>http://www.google.com io=>inputoutput: catch something... st->op1->cond cond(yes)->io->e cond(no)->sub1(right)->op1

END