Skip to content
Branch: master
Go to file
Code

Latest commit

TLmaK0 committed 6601e66 Feb 10, 2018
Fix graph 'size' typo in digraph example.

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time

README.md

gravizo

How to include graphviz graphs in github README.md

New. The indirect way

You can use indirect way to refer a source file as graph description.

Use this syntax: ![Alt text](https://g.gravizo.com/source/<custom_mark>?<url_source_url_encoded>). And use html comment or summary tag <details><summary></summary></details> (you can use html comments but some graphs uses -->) to hide the source followed by your description graph in DOT syntax, UMLGraph, PlantUML or SVG :

Alt text

custom_mark10 digraph G { size ="4,4"; main [shape=box]; main -> parse [weight=8]; parse -> execute; main -> init [style=dotted]; main -> cleanup; execute -> { make_string; printf}; init -> make_string; edge [color=red]; main -> printf [style=bold,label="100 times"]; make_string [label="make a string"]; node [shape=box,style=filled,color=".7 .3 1.0"]; execute -> compare; } custom_mark10
![Alt text](https://g.gravizo.com/source/custom_mark10?https%3A%2F%2Fraw.githubusercontent.com%2FTLmaK0%2Fgravizo%2Fmaster%2FREADME.md)
<details> 
<summary></summary>
custom_mark10
  digraph G {
    size ="4,4";
    main [shape=box];
    main -> parse [weight=8];
    parse -> execute;
    main -> init [style=dotted];
    main -> cleanup;
    execute -> { make_string; printf};
    init -> make_string;
    edge [color=red];
    main -> printf [style=bold,label="100 times"];
    make_string [label="make a string"];
    node [shape=box,style=filled,color=".7 .3 1.0"];
    execute -> compare;
  }
custom_mark10
</details>

This allows to include your graphs in the README and is still readable in a normal text editor.

SVG output it's ready. Only need to replace https://g.gravizo.com/g? by https://g.gravizo.com/svg? and https://g.gravizo.com/source? by https://g.gravizo.com/source/svg?

Alt text

custom_mark12 /** *Structural Things *@opt commentname *@note Notes can *be extended to *span multiple lines */ class Structural{}

/** *@opt all *@note Class */ class Counter extends Structural { static public int counter; public int getCounter(); }

/** *@opt shape activeclass *@opt all *@note Active Class */ class RunningCounter extends Counter{} custom_mark12

![Alt text](https://g.gravizo.com/source/svg/custom_mark12?https%3A%2F%2Fraw.githubusercontent.com%2FTLmaK0%2Fgravizo%2Fmaster%2FREADME.md)
<details> 
<summary></summary>
custom_mark12
/**
*Structural Things
*@opt commentname
*@note Notes can
*be extended to
*span multiple lines
*/
class Structural{}

/**
*@opt all
*@note Class
*/
class Counter extends Structural {
        static public int counter;
        public int getCounter();
}

/**
*@opt shape activeclass
*@opt all
*@note Active Class
*/
class RunningCounter extends Counter{}
custom_mark12
</details>

A sequence diagram. Note that you need to include ; at the end of each line:

Alt text

custom_mark13 @startuml; actor User; participant "First Class" as A; participant "Second Class" as B; participant "Last Class" as C; User -> A: DoWork; activate A; A -> B: Create Request; activate B; B -> C: DoWork; activate C; C -> B: WorkDone; destroy C; B -> A: Request Created; deactivate B; A -> User: Done; deactivate A; @enduml custom_mark13
![Alt text](https://g.gravizo.com/source/custom_mark13?https%3A%2F%2Fraw.githubusercontent.com%2FTLmaK0%2Fgravizo%2Fmaster%2FREADME.md)
<details> 
<summary></summary>
custom_mark13
@startuml;
actor User;
participant "First Class" as A;
participant "Second Class" as B;
participant "Last Class" as C;
User -> A: DoWork;
activate A;
A -> B: Create Request;
activate B;
B -> C: DoWork;
activate C;
C -> B: WorkDone;
destroy C;
B -> A: Request Created;
deactivate B;
A -> User: Done;
deactivate A;
@enduml
custom_mark13
</details>

An activity diagram. Note that you need to include ; at the end of each line:

Alt text

custom_activity @startuml; %28*%29 --> if "Some Test" then; -->[true] "activity 1"; if "" then; -> "activity 3" as a3; else; if "Other test" then; -left-> "activity 5"; else; --> "activity 6"; endif; endif; else; ->[false] "activity 2"; endif; a3 --> if "last test" then; --> "activity 7"; else; -> "activity 8"; endif; @enduml custom_activity
![Alt text](https://g.gravizo.com/source/custom_activity?https%3A%2F%2Fraw.githubusercontent.com%2FTLmaK0%2Fgravizo%2Fmaster%2FREADME.md)
<details> 
<summary></summary>
custom_activity
@startuml;
%28*%29 --> if "Some Test" then;
  -->[true] "activity 1";
  if "" then;
    -> "activity 3" as a3;
  else;
    if "Other test" then;
      -left-> "activity 5";
    else;
      --> "activity 6";
    endif;
  endif;
else;
  ->[false] "activity 2";
endif;
a3 --> if "last test" then;
  --> "activity 7";
else;
  -> "activity 8";
endif;
@enduml
custom_activity
</details>

Now also suports SVG in JSON format:

Alt text

custom_svg @gravizosvg {"svg": { "@height": "450", "@width": "450", "path": [ {"@id":"lineAB", "@d": "M 100 350 l 150 -300", "@stroke":"red"}, {"@id":"lineBC", "@d": "M 250 50 l 150 300", "@stroke":"red"}, {"@d":"M 100 350 q 150 -300 300 0", "@stroke":"blue", "@fill":"none"} ], "g": [ {"@stroke":"black", "circle":[ {"@id":"pointA", "@cx":"100", "@cy":"350", "@r":"3"}, {"@id":"pointB", "@cx":"250", "@cy":"50", "@r":"3"}, {"@id":"pointC", "@cx":"400", "@cy":"350", "@r":"3"} ]}, {"text": [ {"@x":"100", "@y":"350", "@dx":"-30", "$":"A"}, {"@x":"250", "@y":"50", "@dy":"-10", "$":"B"}, {"@x":"400", "@y":"350", "@dx":"30", "$":"C"} ]} ] } } custom_svg
![Alt text](https://g.gravizo.com/source/custom_svg?https%3A%2F%2Fraw.githubusercontent.com%2FTLmaK0%2Fgravizo%2Fmaster%2FREADME.md)
<details> 
<summary></summary>
custom_svg
@gravizosvg
{"svg": {
		"@height": "450",
		"@width": "450", 
		"path": [
			{"@id":"lineAB", "@d": "M 100 350 l 150 -300", "@stroke":"red"},
			{"@id":"lineBC", "@d": "M 250 50 l 150 300", "@stroke":"red"},
			{"@d":"M 100 350 q 150 -300 300 0", "@stroke":"blue", "@fill":"none"}
    ],
		"g": [
			{"@stroke":"black", "circle":[  
				{"@id":"pointA", "@cx":"100", "@cy":"350", "@r":"3"},
				{"@id":"pointB", "@cx":"250", "@cy":"50", "@r":"3"},
				{"@id":"pointC", "@cx":"400", "@cy":"350", "@r":"3"}
			]},
			{"text": [
				{"@x":"100", "@y":"350", "@dx":"-30", "$":"A"},
				{"@x":"250", "@y":"50", "@dy":"-10", "$":"B"},
				{"@x":"400", "@y":"350", "@dx":"30", "$":"C"}
			]}
		]
	}
}
custom_svg
</details>

About

How to include graphviz graphs in github README

Resources

Releases

No releases published
You can’t perform that action at this time.