a simple way of describing graphs and include it easily in your web for free, blog, markdown page, github, and any location where remote images can be showed. Gravizo uses Graphviz to render graphs. It supports DOT, PlantUML, UMLGraph syntax and SVG in JSON format. It will include other formats in the future. No javascript, no plugins needed so you can include in any document.
New activity diagrams from PlantUML. Simply adding an extra ; to the end of the text lines
Allow to render as SVG.
Added support for PlantUML state diagrams.
New graph source. You can point to a public file as source for the gravizo. Also can include multiple sources in the same file, allowing to add multiple graphs in same README.md without escape characters and compatible with Github and Bitbucket.
Support for undirect dot graphs.
Support CJK characters (Chinese, Japanese, and Korean).
Can restore PlantUML default look&feel adding "skinparam monochrome false".
Gravizo now supports SVG in JSON format.
Gravizo now supports activity diagrams.
Use Gravizo is very easy, only need to call the url https://g.gravizo.com/svg? followed by your graph description in DOT, PlantUML or UMLGraph syntax.
Use https://g.gravizo.com/source/svg?<source_url_url_encoded>. Gravizo will look at source_url_url_encode for a source graph.
You can also include a mark to search the code inside de source file https://g.gravizo.com/source/svg/<mark>?<source_url_url_encoded>. Then inside your source file use the word mark (or whatever you want) to mark the start and the end of your graph. Look at bitbucket for examples.
You can choose between render graph as PNG or SVG.
Only need to replace https://g.gravizo.com/svg? by https://g.gravizo.com/g? and https://g.gravizo.com/source/svg? by https://g.gravizo.com/source/g?
<img src='https://g.gravizo.com/svg?
digraph G {
main -> parse -> execute;
main -> init;
main -> cleanup;
execute -> make_string;
execute -> printf
init -> make_string;
main -> printf;
execute -> compare;
}
'/>
Also can use Markdown syntax including a image tag and then the url content include DOT, PlantUML or UMLGraph syntax. Don't forget to close the image tag.
![Alt text](https://g.gravizo.com/svg?
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;
}
)
Use it on you README.md at github to show the graph directly in your home page. Here is a sample
Use http://gravizo.com/source/svg/custom_mark?source_url_url_encoded to point source_url_url_encoded where is the source for the graph. Use custom_mark to delimit where the source is. Also include a blank image to hide source if you want.
![Alt text](http://www.gravizo.com/img/1x1.png#
thiisthemark
@startuml
object Object01
object Object02
object Object03
object Object04
object Object05
object Object06
object Object07
object Object08
Object01 <|-- Object02
Object03 *-- Object04
Object05 o-- "4" Object06
Object07 .. Object08 : some labels
@enduml
thiisthemark
More at bitbucket.org
<img src='https://g.gravizo.com/svg?
@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
'>
This is a class diagram write in UMLGraph
<img src='https://g.gravizo.com/svg?
/**
*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%28%29;
}
/**
*@opt shape activeclass
*@opt all
*@note Active Class
*/
class RunningCounter extends Counter{}
'>
This is a activity diagram write in UMLGraph
@startuml;
(*) --> 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
Gravizo also supports SVG in JSON format. Starts with @gravizosvg to indicate you are using an svg, use @ for attributes and $ for text nodes. Put attributes before nodes. The image will be reduced to 400 x 400.
@gravizosvg
{
"svg": {
"@height": "450",
"@width": "450",
"@xmlns": "http://www.w3.org/2000/svg",
"path": [
{ "@id": "lineAB", "@d": "M 100 350 l 150 -300",
"@stroke": "red", "@stroke-width": "3", "@fill": "none" },
{ "@id": "lineBC", "@d": "M 250 50 l 150 300",
"@stroke": "red", "@stroke-width": "3", "@fill": "none" },
{ "@d": "M 175 200 l 150 0", "@stroke": "green",
"@stroke-width": "3", "@fill": "none" },
{ "@d": "M 100 350 q 150 -300 300 0",
"@stroke": "blue", "@stroke-width": "5", "@fill": "none"
}
],
"g": [
{ "@stroke": "black", "@stroke-width": "3", "@fill": "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" }
]
},
{
"@font-size": "30", "@font-family": "sans-serif", "@fill": "black",
"@stroke": "none", "@text-anchor": "middle",
"text": [
{ "@x": "100", "@y": "350", "@dx": "-30", "$": "A" },
{ "@x": "250", "@y": "50", "@dy": "-10", "$": "B" },
{ "@x": "400", "@y": "350", "@dx": "30", "$": "C" }
]
}
]
}
}
This is a state diagram write in PlantUML
@startuml;
[*] --> State1;
State1 --> [*];
State1 : this is a string;
State1 : this is another string;
State1 -> State2;
State2 --> [*];
@enduml
New activity diagram for PlantUML
@startuml;
start;
:Hello world;;
:This is defined on;
several **lines**;;
stop;
@enduml;
Some times the code insede DOT, UMLGraph or PlantUML syntax contains chars that the processor isn't able to sent to Gravizo, when this happen you can use this converter to transform to Gravizo url and from Gravizo url to DOT syntax. Use the result as url in your image tag.
Gravizo will be free for ever, but there are some business requirements, like confidentiality that should be managed in other ways. To support this requirements we have created this options.
Use the converter to solve any problem with your processor, but if you want fix the problems by hand, these are the knowed incompatibilities
Use %23 instead of # character.
When you include a img tag, the source attribute must be enclosed by ' and not by ".
The processor must to allow multiple lines to the src of the image, some processors like Bitbucket doesn't allow it. You can instead put all definition in one single line.
In markdown you can't use parenteses.
In markdown you can't use \l \r.
The description should contain 2000 characteres max
Usage /* comment */ instead of // comment
Because all contente generated are real images, you can cache it in any device. You can show in any browser that supports png images, like mobiles, tablets, consoles, watches, ... You can embed it in word documents, slides, etc...
Gravizo is enhanced by a CDN (Content Delibery Network) provided by Cloudflare. The image is generated only one time at month, so every time you show the image it will be available in milliseconds. Because the content is cached in the network, it will be visibles although the system goes down for weeks. You don't need to spend time and money installing a reliable cluster of servers, we will provide it for you and is free for anyone. Anyway you have the full source of the image (the code embeded) so you can move it to your own implementation at anytime.
In the next versions I want to include other proposed formats