tlmak0 / gravizo Goto Github PK

Hello,

Firstly, thanks for your work.

The following text is copyed from https://gravizo.com

• Code:

![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;
  }
)

• Result:
  ![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

• Code:

![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)

• Result:
  

Thanks again

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

look at

What do you think about it ?

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.

e.g.

digraph G {
   a->b;
   a[label="你好"]
 }

Looking at the README here, none of the diagrams are rendering (instead showing jumbled lines of the underlying DOT (etc.)).

For example:

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
'>

http://plantuml.com/commons

After further experiments I can see that it doesn't like the '*'. scale 500 widthworks 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)

I can not see the sample page.
https://github.com/TLmaK0/gravizo

http://g.gravizo.com/
"digraph G" problem?

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?

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!

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
)

It should allow to share and modify images without removing watermark.

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.

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?

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.

http://plantuml.com/activity2.html#simple

Gravizo should support PlantUML State Diagrams:

@startuml

[*] --> State1
State1 --> [*]
State1 : this is a string
State1 : this is another string

State1 -> State2
State2 --> [*]

@enduml

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.

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! 👍

Is gravizo capable of rendering a graphviz code contained in a certain URL?

For example: http://gravizo.com/g?url=https%3A%2F%2Fgist.githubusercontent.com%2Ftgirardi%2F8868651eeaa77a77ba19%2Fraw%2F54dab9f293b50f7efa19dbdabedb60b803e6d9cf%2Fejemplo.dot

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.

How can i use cluster like http://www.graphviz.org/Gallery/directed/cluster.html ?

Hello!

Great tool!

In below example the Gravizo icon partly hides the content.

1. Do you know how to change that?

I just paste the code, because it would not render here....

2. Do you know why it does not render?

<img src='https://g.gravizo.com/svg?
 digraph G {
    lookup_table -> image_appearance [label="  changes"];
    image_appearance -> scientific_message [label="  changes"];
  }
'/>

![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 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.

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

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?

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>

e.g. this link https://g.gravizo.com/source/svg?https%3A%2F%2Fgist.githubusercontent.com%2Fjkochaniak%2F42b2f2823617471b38120ed3012abb75%2Fraw%2F547473b04c18bce8d933584f1f65208ebd47cff8%2Ftest.txt

shows me a graph_not_found image. But this link:

https://g.gravizo.com/source?https%3A%2F%2Fgist.githubusercontent.com%2Fjkochaniak%2F42b2f2823617471b38120ed3012abb75%2Fraw%2F547473b04c18bce8d933584f1f65208ebd47cff8%2Ftest.txt

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!

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.

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

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;
)

Turn into this:

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;
)

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

It looks as gravizo.com is down?

See your sequence diagram example from https://github.com/TLmaK0/gravizo

Extra lines are drawn from upper participant label to lower label.

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

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

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.

dataexchange.puml.txt

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.

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.

Sequence example rendering broken just like in example on Gravizo.com

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.

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) ?

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.

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

It appears the sequence diagrams have a rendering glitch. The screenshot below is from the Gravizo.com site.

@startuml
start
-> transition;
end
@enduml

renders as

instead of

Anything can be done? Special escaping? Workaround?

Thanks.

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.