tlmak0 / gravizo Goto Github PK
View Code? Open in Web Editor NEWHow to include graphviz graphs in github README
How to include graphviz graphs in github README
sometimes the graph description is too long for GitHub (but works fine with the gravizo test/encoder), it would be nice to be able to do something like describe here : http://stackoverflow.com/a/32771815/274188
tl;dr:
I'd like to have an url like this : http://g.gravizo.com/g?http://somewhere.org/graph-source.txt
where http://somewhere.org/graph-source.txt contains either Graph source supported by graphvizo (eg: graphviz)
I would use it like so : http://g.gravizo.com/g?https://raw.githubusercontent.com/wiki/org/project/graph1.md so that when I update the wiki page "graph1", the image generated by http://g.gravizo.com/g?https://raw.githubusercontent.com/wiki/org/project/graph1.md is updated accordingly
note: It may also remove the need to encode the Graph source and remove some incompatibilities
but I don't how it would work with the CDN
Great tool, thanks.
Working with it in Github private repos is difficult. It used to work, but something has changed and URL-encoded diagram definition is broken now.
Because the repo is private, one can't use the indirect
method - the source is not accessible.
For the direct method, Github markdown does not support multi-line <img>
or ![]()
images.
Therefore one must url-encode the multi-line diagram. However, the processor no longer accepts the input (this used to work).
Identical input shown here, first without "Extra compatibility", it works, but not the other way.
In Plantuml it is possible to scale the drawing. However, when using this in gravizo I get a syntax error.
<img src='http://g.gravizo.com/g?
@startuml;
scale 180*90;
Bob->Alice : hello;
@enduml
'>
After further experiments I can see that it doesn't like the '*'. scale 500 width
works fine.
However. After a small typo where it became scale 5000 width
it seemed that the gravizo.com server crashed (It stopped responding and not only for our IP).
I would recommend some kind of sanity check on the scaling values.
Leaving this here, if others hit the same problems.
The sequence diagram you have as an example in the README doesn't render correctly:
It should look like this:
But it looks like this:
(note lines connecting top-right of "First Class")
Here is the current inline version:
![Alt text](https://g.gravizo.com/g?
@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)
With big uml descriptions gravizo renders black strokes from the upper edge to each component, the borders of the components are missing:
Used definition:
![woo](http://g.gravizo.com/g?
@startuml;
skinparam monochrome true;
skinparam shadowing false;
skinparam component {;
backgroundColor<<artifact:npm>> lightgray;
componentFontColor<<artifact:fooofoo>> white;
};
component "meh" {;
component [foo-bar] as foo.pp.git;
component [foo-baz-fizz] as foo.bs.git;
component [foo-looloo] as foo.looloo.git;
component [foo-baz-protoype-sisi] as foo.sisi.git;
component [foo-baz-frame] as foo.frame.git;
};
component "mah" {;
component [foo-bar-ham] as foo.pp.ham.woom;
component [foo-bar-ham-deploy] as foo.pp.ham.deploy;
component [foo-bar-cloud-deploy] as foo.pp.cloud.deploy;
component [foo-buzz] as foo.buzz.woom;
component [foo-baz-fizz-ham-deploy] as foo.bs.ham.deploy;
component [foo-baz-fizz-cloud-deploy] as foo.bs.cloud.deploy;
component [foo-baz-fizz-ham] as foo.bs.woom;
component "foo-baz-sums" as foo.sums;
component [foo-looloo] as foo.looloo.woom;
component [foo-baz-protoype-sisi] as foo.sisi.woom;
component "foo-baz-frame" as foo.frame.woom;
};
component "moo"{;
package [foo-baz-frame] <<artifact:npm>> as foo.frame.npm;
package [foo-buzz] <<artifact:npm>> as foo.buzz.npm;
package [foo-looloo] as foo.looloo.npm;
package [foo-baz-protoype-sisi] as foo.sisi.npm;
};
component "spee"{;
component [foo-bar] <<staging>> as foo.pp.ham.app;
component [foo-baz-fizz] <<staging>> as foo.bs.ham.app;
component [foo-bar] <<production>> as foo.pp.cloud.app;
component [foo-baz-fizz] <<production>> as foo.bs.cloud.app;
};
component "shrimps"{;
node [schoo/foo-bar] <<artifact:fooofoo>> as foo.pp.ramp;
node [schoo/foo-baz-fizz] <<artifact:fooofoo>> as foo.bs.ramp;
};
foo.pp.git ..> foo.pp.ham.woom;
foo.pp.git ..> foo.buzz.woom;
foo.bs.git ..> foo.bs.woom;
foo.looloo.git ..> foo.looloo.woom;
foo.sisi.git ..> foo.sisi.woom;
foo.frame.git => foo.frame.woom;
foo.looloo.woom => foo.looloo.npm;
foo.buzz.woom => foo.buzz.npm;
foo.sisi.woom => foo.sisi.npm;
foo.frame.woom => foo.frame.npm;
foo.looloo.npm ..> foo.pp.ham.woom;
foo.buzz.npm ..> foo.bs.woom;
foo.buzz.npm ..> foo.sums;
foo.frame.npm ..> foo.bs.woom;
foo.frame.npm ..> foo.sums;
foo.sisi.npm ..> foo.bs.woom;
foo.pp.ham.woom => foo.pp.ramp;
foo.bs.woom => foo.bs.ramp;
foo.pp.ham.app <.. foo.pp.ramp;
foo.bs.ham.app <.. foo.bs.ramp;
foo.pp.cloud.app <.. foo.pp.ramp;
foo.bs.cloud.app <.. foo.bs.ramp;
foo.pp.ham.woom ..> foo.pp.ham.deploy;
foo.pp.ham.woom ..> foo.pp.cloud.deploy;
foo.bs.woom ..> foo.bs.ham.deploy;
foo.bs.woom ..> foo.bs.cloud.deploy;
foo.pp.ham.deploy ==> foo.pp.ham.app;
foo.pp.cloud.deploy ==> foo.pp.cloud.app;
foo.bs.ham.deploy ==> foo.bs.ham.app;
foo.bs.cloud.deploy ==> foo.bs.cloud.app;
@enduml
)
For example, the first example from the wikipedia page https://en.wikipedia.org/wiki/DOT_(graph_description_language)#Undirected_graphs:
graph graphname {
a -- b -- c;
b -- d;
}
In gitlab README.rst and wiki(s) we set RestructuredText (Rdoc) format instead of not Markdown.
Can we use Gravizo with Restructuredtext (gitlab/wiki/format Rdoc) ?
I saw in the other issue that Github removed a feature which forces us to use the indirect way:
https://g.gravizo.com/source/svg?<source_url_url_encoded>
How do I get this <source_url_url_encoded>
?
EDIT: followed this tutorial, but get @startuml digraph Syntax error? did you mean digraph"
Thanks
Hello!
Great tool!
In below example the Gravizo icon partly hides the content.
I just paste the code, because it would not render here....
<img src='https://g.gravizo.com/svg?
digraph G {
lookup_table -> image_appearance [label=" changes"];
image_appearance -> scientific_message [label=" changes"];
}
'/>
Is gravizo capable of rendering a graphviz code contained in a certain URL?
The above url contained in the "url" parameter is the raw URL of one of my Gists.
If not, I think it would be a very nice feature.
An interesting use case would be to make a Gist with the graphviz code and then use gravizo to render it. Different people could collaborate to the graph by making Pull Requests to the Gist and each new version could be rendered using gravizo.
It seems that { and } isn't supported in UML when it comes to being displayed indirectly on GitHub.
I have the following UML:
@startuml;
actor User;
participant "Relay service" as A;
participant "Key/value service" as B;
User -> A: GET /relay/{key};
activate A;
A -> B: GET /store/{key};
activate B;
B -> A: {"key":"{key}", "value":"{value}"};
deactivate B;
A -> User: {"key":"{key}", "value":"{value}"};
deactivate A;
@enduml
It doesn't not seem to be rendered correctly. For reference, see this.
Thanks for a really cool project!
I worked with class diagram. Used direct way of usage from http://www.gravizo.com page
When I try to write generic types, i.e. MockClazz it can't generate picture. When I try to replace '<>' with <%3C%3E> it draws 'cXXX' instead of class where 'XXX' are random numbers that change when the page is reloaded.
One more.
It can't generate a picture from text with both class/interface and enum. However, it can creates pictures of enums, when there are no classes.
First of all, thank you for such nice and handy service! 💪
I started using it in my project (https://github.com/Quadric/radiaction/tree/master/examples/with-webtask#infrastructure) and even though everything works, the image rendered has very low quality.
I understand that the space is quite narrow and not optimal for such graph, but the same graph and the same viewport render with a way higher resolution at http://viz-js.com/
Would it possible to increase the resolution of the rendered images provided by gravizo?
I can not see the sample page.
https://github.com/TLmaK0/gravizo
http://g.gravizo.com/
"digraph G" problem?
This works:
![a -> b](http://g.gravizo.com/g?
digraph G {
a -> b
}
)
But this doesn't (in Gravizo):
![a -> b](http://g.gravizo.com/g?
digraph G
{
a -> b
}
)
The second (Allman style indentation) works in any of the other Graphviz programs I've used (Graphviz's dot.exe, viz.js, erdos, Liviz.js, &c.) This was surprising and took me quite a while to figure out what was wrong with all of my existing DOT graph syntax.
I can't get class diagrams to work using DOT syntax. I've tried using the tester/encoder to get something that gravizo can parse, but its not rendering correctly.
Here's the diagram I am trying to render and what it should look like:
digraph G {
node [shape = "record"]
Animal [
label = "{Animal|+ name : string\l+ age : int\l|+ die() : void\l}"
]
}
(generated with webgraphviz.com)
Here's what the tester/encoder is giving me:
It seems to separate the class in to individual boxes.
This project looks cool, but I'm confused by this line:
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>
It looks like <custom_mark>
is something like custom_mark10
, but <url_source_url_encoded>
looks like it is somehow project related?
Hi,
I'm trying to set the font for the graph like this:
digraph G {
-Gfontname="Trebuchet MS"
...
}
but nothing seems to be happening. The "converter" doesn't respect it either and it doesn't throw any errors. Initially, I though I was doing something wrong with the fontname
value, but If I add it individually to each element it respects it.
Also since we are on that subject the -N
and -E
operators for global attributes for all the nodes and edges don't seem to have any effect either.
Thanks,
Chris
I'm noticing that anything newly generated with gravizo has suddenly started rendering oddly. Boxes are rendering with a crooked border and extra lines are often being added. This is even occurring with simple diagrams...
For instance, a simple Plant UML diagram:
![](http://g.gravizo.com/g?
@startuml;
class MyClass{;
};
@enduml;
)
If I add any sort of arrows, things get a bit worse.
![](http://g.gravizo.com/g?
@startuml;
interface MyInterface{;
};
class Factory{;
};
Factory-+MyInterface;
@enduml;
)
See your sequence diagram example from https://github.com/TLmaK0/gravizo
Extra lines are drawn from upper participant label to lower label.
It looks as gravizo.com is down?
Hello,
Firstly, thanks for your work.
The following text is copyed from https://gravizo.com
![Alt text](https://g.gravizo.com/svg?
digraph G {
aize ="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;
}
)
I cannot see the graph using the preview.
It works encoding the graph description
![Alt text](https://g.gravizo.com/svg?digraph%20G%20%7B%0A%20%20aize%20%3D%224%2C4%22%3B%0A%20%20main%20%5Bshape%3Dbox%5D%3B%0A%20%20main%20-%3E%20parse%20%5Bweight%3D8%5D%3B%0A%20%20parse%20-%3E%20execute%3B%0A%20%20main%20-%3E%20init%20%5Bstyle%3Ddotted%5D%3B%0A%20%20main%20-%3E%20cleanup%3B%0A%20%20execute%20-%3E%20%7B%20make_string%3B%20printf%7D%0A%20%20init%20-%3E%20make_string%3B%0A%20%20edge%20%5Bcolor%3Dred%5D%3B%0A%20%20main%20-%3E%20printf%20%5Bstyle%3Dbold%2Clabel%3D%22100%20times%22%5D%3B%0A%20%20make_string%20%5Blabel%3D%22make%20a%20string%22%5D%3B%0A%20%20node%20%5Bshape%3Dbox%2Cstyle%3Dfilled%2Ccolor%3D%22.7%20.3%201.0%22%5D%3B%0A%20%20execute%20-%3E%20compare%3B%0A%7D)
Thanks again
When I update graph in gist image don't get updated unless I also change url (like rename document). According to github/markup#224 (comment) your service should also set one of Expires
, Last-Modified
or Etag
headers.
Is there any reason all the examples and the test/encoder offer non-secure URLs by default?
Looks like g.gravizo.com is fronted by CloudFlare anyway, so why not switch to secure-by-default and lead a good example?
I fear that most people just use the example URLs/generated URLs and therefore needlessly expose their users to man-in-the-middle attacks. They might not realize that https is supported or they are afraid to use it since it is something not arvertised and therefore not guaranteed to be always supported.
Some Graphviz graphs are much easier to understand when rendered using the circo engine. It would be nice if there were a different URL or a pragma comment or URL parameter or flag or something to select a rendering engine other than dot.
Firstly, thanks for this great tool!
digraph D {
node_A [shape=record, label="shape=record|{above|middle|below}|right"];
node_B [shape=plaintext, label="shape=plaintext|{curly|braces and|bars without}|effect"];
}
should ideally be rendered as:
Instead, it's rendered as:
Repro example taken from here.
I read your read.me
file. I find you use the direct url and the annonation.
When i write the class graph in macDown
( One kind of software of mac). I think it can't use the example of the official website.
![Alt text](https://g.gravizo.com/svg?
digraph G {
aize ="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;
}
)
By the way, your must use the url like ![Alt text](http://g.gravizo.com/source/gravizosample?https%3A%2F%2Fbitbucket.org%2FTLmaK0%2Fgravizo-example%2Fraw%2Fmaster%2FREADME.md#
.
Any good ideas?
![graph](https://g.gravizo.com/svg?
@startuml;
actor SpringBoot;
participant "First Class" as A;
participant "Second Class" as B;
participant "Last Class" as C;
User -> A: DoWork;
activate A;
A --> User: Done;
deactivate A;
@enduml)
I was having troubles getting gravizo to work in github wiki pages.
I created a page at https://github.com/TLmaK0/gravizo/wiki/github-wiki-test to show what I'm seeing.
As a work-around I ended up using encoded URLs.
I don't think this is an issue that needs to be resolved but a working github wiki page with a work-around might be useful for some users.
Hi,
Gravizo is a very useful tool. Thanks.
Cardinalty on relations seems not working. Image generation fails on test URL or undirect.
However the same puml works great on plantuml.
There are some long lines drawn wrongly in the diagrams. Also visible on http://www.gravizo.com. Can you have a look?
Thanks a lot for a great service! 👍
It seems the multiline image links as mentioned in all the examples no longer work in GitHub's markdown files. (It does work if we use properly escaped URLs.)
https://github.com/TLmaK0/gravizo/blob/master/README.md
Same result with my browser extensions turned off.
Hi TLmaK0
thank you for your nice work !
It appears that github indirect way to present diagrams does not work
It only shows boxes next to each other and without arrows nor lines
I wasn't able to manage it
What do you think about it ?
Hey there,
any chance Gravizo could add support for different image formats? I think about something in line with:
![Alt text](http://g.gravizo.com/g?
@startuml;
component "Gravizo" as gravizo;
component "Callsite" as callsite;
callsite -> gravizo : specifies format;
gravizo -> callsite : delivers format;
@enduml;
.(svg|jpeg|png) # New magic happens here
http://www.gravizo.com/ is a very nice homepage which is full of helpful information and provides a fairly comprehensive explanation of what gravizo can do, and how to use it, including both direct and indirect techniques. However unfortunately the github README.md is much less comprehensive (it doesn't even explain the direct method), and it doesn't link to http://www.gravizo.com/.
IMHO it doesn't make sense to have two sets of documentation where one is incomplete. So I would suggest removing one set and making it simply link to the other location, so that there is a single source of truth which will be comprehensive and accurate.
Hola Hugo,
PlantUML supports links, but it seems that Gravizo ignore them.
Here are some examples:
http://plantuml.sourceforge.net/qa/?qa=90/web-links-in-generated-images-e-g-using-image-maps
I'm looking for something to generate a simple class diagram but with hyperlinks that takes you directly to the doc of the entity.
Thanks
I have some issues with my gravizo drawings. Seems also that not all images on http://www.gravizo.com works. Can you have a look? Thanks
How can i use cluster like http://www.graphviz.org/Gallery/directed/cluster.html ?
I think the documentation for the indirect method on the gravizo.com How to use page is incorrect. It says that to use Gravizo indirectly, you need to use an url like:
https://g.gravizo.com/
source/svg?
<source_url_url_encoded>
However, this doesn't work for me. What does work is:
https://g.gravizo.com/
source?
<source_url_url_encoded>
shows me a graph_not_found image. But this link:
renders my diagram.
Just wanted to point this out since I lost some time figuring out how to make it work. Thank you so much for making this tool and website!
Gravizo should support PlantUML State Diagrams:
@startuml
[*] --> State1
State1 --> [*]
State1 : this is a string
State1 : this is another string
State1 -> State2
State2 --> [*]
@enduml
It should allow to share and modify images without removing watermark.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.