Skip to content

Instantly share code, notes, and snippets.

@svenevs
Last active October 26, 2022 23:06
Show Gist options
  • Save svenevs/ce05761128e240e27883e3372ccd4ecd to your computer and use it in GitHub Desktop.
Save svenevs/ce05761128e240e27883e3372ccd4ecd to your computer and use it in GitHub Desktop.
Having trouble using Gravizo? Cheat the system

What is Gravizo?

Gravizo is a really cool tool to display graphs in your README.

What is the Problem?

Lately, none of their examples seem to be working for me. I don't like using the indirect method, because it means that if the indirect breaks or is no longer public or whatever, who knows what will happen. Slash it's hard for me to keep track of multiple sources.

The issue, though, is if you copy-paste their current examples for the direct method (e.g. the GitHub one they suggest):

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

Will give us

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

What is the Cause?

I don't know. I suspect that GitHub changed something related to their API maybe, because I could have sworn I had these working once upon a time.

Yup, GitHub did it again. Check out the issue

How to I Cheat?

urlencode your graph. A dirty trick that makes for some fundamentally unreadable content, but hey GitHub let's you do inline html. So working with the above graph, the important part for us is to make sure we only urlencode the relevant part.

  1. The ![Alt text](https://g.gravizo.com/svg? stays exactly as it is.
  2. urlencode the graph itself
  3. Make sure you have the closing ) for the original ![Alt Text](image location)!

Thanks that's useless

You almost certainly have python, so lets do it this way. All you need to do is copy digraph G { .... }, very important that you start exactly at that first d (e.g. do not copy the space before it), and go all the way to the closing }. Assuming you have this in your clipboard, the code I type is going to be raw = '''<ctrl+shift+v>. As in I'm creating a python multi-line string with raw = ''', then I paste, then I type the closing ''' to finish the python string, hit <enter> to finish the python statement. The raw variable now has the graph that we want to urlencode.

$ python
Python 2.7.11 (default, Sep 29 2016, 13:33:00)
[GCC 5.3.1 20160406 (Red Hat 5.3.1-6)] on linux2
Type "help", "copyright", "credits" or "license" for more information.
>>> raw = '''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;
...   }'''
# update from future, in python 3
#     from urllib.parse import quote
>>> import urllib
>>> urllib.quote(raw)
'digraph%20G%20%7B%0A%20%20%20%20aize%20%3D%224%2C4%22%3B%0A%20%20%20%20main%20%5Bshape%3Dbox%5D%3B%0A%20%20%20%20main%20-%3E%20parse%20%5Bweight%3D8%5D%3B%0A%20%20%20%20parse%20-%3E%20execute%3B%0A%20%20%20%20main%20-%3E%20init%20%5Bstyle%3Ddotted%5D%3B%0A%20%20%20%20main%20-%3E%20cleanup%3B%0A%20%20%20%20execute%20-%3E%20%7B%20make_string%3B%20printf%7D%0A%20%20%20%20init%20-%3E%20make_string%3B%0A%20%20%20%20edge%20%5Bcolor%3Dred%5D%3B%0A%20%20%20%20main%20-%3E%20printf%20%5Bstyle%3Dbold%2Clabel%3D%22100%20times%22%5D%3B%0A%20%20%20%20make_string%20%5Blabel%3D%22make%20a%20string%22%5D%3B%0A%20%20%20%20node%20%5Bshape%3Dbox%2Cstyle%3Dfilled%2Ccolor%3D%22.7%20.3%201.0%22%5D%3B%0A%20%20%20%20execute%20-%3E%20compare%3B%0A%20%20%7D'

So now you just need to create the full url. Copy from the digraph all the way to the end.

  • Do not copy the starting ' from python printing it
  • Do not copy the closing ' from python printing it

Put it all together

In your markdown document

![Alt text](https://g.gravizo.com/svg?digraph%20G%20%7B%0A%20%20%20%20aize%20%3D%224%2C4%22%3B%0A%20%20%20%20main%20%5Bshape%3Dbox%5D%3B%0A%20%20%20%20main%20-%3E%20parse%20%5Bweight%3D8%5D%3B%0A%20%20%20%20parse%20-%3E%20execute%3B%0A%20%20%20%20main%20-%3E%20init%20%5Bstyle%3Ddotted%5D%3B%0A%20%20%20%20main%20-%3E%20cleanup%3B%0A%20%20%20%20execute%20-%3E%20%7B%20make_string%3B%20printf%7D%0A%20%20%20%20init%20-%3E%20make_string%3B%0A%20%20%20%20edge%20%5Bcolor%3Dred%5D%3B%0A%20%20%20%20main%20-%3E%20printf%20%5Bstyle%3Dbold%2Clabel%3D%22100%20times%22%5D%3B%0A%20%20%20%20make_string%20%5Blabel%3D%22make%20a%20string%22%5D%3B%0A%20%20%20%20node%20%5Bshape%3Dbox%2Cstyle%3Dfilled%2Ccolor%3D%22.7%20.3%201.0%22%5D%3B%0A%20%20%20%20execute%20-%3E%20compare%3B%0A%20%20%7D)

will give us

Alt text

Remembering that we are just putting together three simple parts from How do I Cheat?.

Final Thoughts

So hey, you'll probably want to do this more than once. Advise putting your graph in an html comment in the same document so that you can regenerate it if you need to using urlencode.

<!-- This is the original graph
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;
}
-->
<!-- After using urlencode and adding it to 'https://g.gravizo.com/svg?' -->
<!-- Remember the closing parentheses -->
![Alt text](https://g.gravizo.com/svg?digraph%20G%20%7B%0A%20%20%20%20aize%20%3D%224%2C4%22%3B%0A%20%20%20%20main%20%5Bshape%3Dbox%5D%3B%0A%20%20%20%20main%20-%3E%20parse%20%5Bweight%3D8%5D%3B%0A%20%20%20%20parse%20-%3E%20execute%3B%0A%20%20%20%20main%20-%3E%20init%20%5Bstyle%3Ddotted%5D%3B%0A%20%20%20%20main%20-%3E%20cleanup%3B%0A%20%20%20%20execute%20-%3E%20%7B%20make_string%3B%20printf%7D%0A%20%20%20%20init%20-%3E%20make_string%3B%0A%20%20%20%20edge%20%5Bcolor%3Dred%5D%3B%0A%20%20%20%20main%20-%3E%20printf%20%5Bstyle%3Dbold%2Clabel%3D%22100%20times%22%5D%3B%0A%20%20%20%20make_string%20%5Blabel%3D%22make%20a%20string%22%5D%3B%0A%20%20%20%20node%20%5Bshape%3Dbox%2Cstyle%3Dfilled%2Ccolor%3D%22.7%20.3%201.0%22%5D%3B%0A%20%20%20%20execute%20-%3E%20compare%3B%0A%20%20%7D)

Proof of concept, here is that exact code now:

Alt text

Do what you gotta do you know? The gravizo example is very clear that you need to be careful doing something like this: <!-- html comments --> might conflict with the graph notation of your chosen language.

Much love gravizo

I truly love this service, and I'm grateful for what they do. Hope somebody struggling benefits from the above one day. When in doubt, urlencode. If it still doesn't work, urldecode and see if you got the same thing out that you put in.

Bonus

There are a lot of limitations that GitHub puts on their README renderings. No custom styling, <iframe> gets deleted, etc. Not complaining, these are for security reasons. But there's a nice little hack you can use (found it on stack overflow somewhere, don't remember where). Just use a <p align="center">, and embed the image with <img alt="Alt text" src="that crazy long url above"/>.

<p align="center">
    <img alt="Alt Text" src="https://g.gravizo.com/svg?digraph%20G%20%7B%0A%20%20%20%20aize%20%3D%224%2C4%22%3B%0A%20%20%20%20main%20%5Bshape%3Dbox%5D%3B%0A%20%20%20%20main%20-%3E%20parse%20%5Bweight%3D8%5D%3B%0A%20%20%20%20parse%20-%3E%20execute%3B%0A%20%20%20%20main%20-%3E%20init%20%5Bstyle%3Ddotted%5D%3B%0A%20%20%20%20main%20-%3E%20cleanup%3B%0A%20%20%20%20execute%20-%3E%20%7B%20make_string%3B%20printf%7D%0A%20%20%20%20init%20-%3E%20make_string%3B%0A%20%20%20%20edge%20%5Bcolor%3Dred%5D%3B%0A%20%20%20%20main%20-%3E%20printf%20%5Bstyle%3Dbold%2Clabel%3D%22100%20times%22%5D%3B%0A%20%20%20%20make_string%20%5Blabel%3D%22make%20a%20string%22%5D%3B%0A%20%20%20%20node%20%5Bshape%3Dbox%2Cstyle%3Dfilled%2Ccolor%3D%22.7%20.3%201.0%22%5D%3B%0A%20%20%20%20execute%20-%3E%20compare%3B%0A%20%20%7D" />
</p>

Gives us

Alt Text

  • In this instance, make sure you do not copy the closing ) from the markdown linking syntax.
  • Make sure your string has a starting and end quote.
    • In the markdown version, we did not have quotes to start / end. Here we need it.
@roskoff
Copy link

roskoff commented Apr 23, 2018

Excelent!

@juliangaal
Copy link

I am getting Syntax error: digraph. Did you mean digraph?. Any ideas?

@svenevs
Copy link
Author

svenevs commented Aug 1, 2018

@juliangaal sorry to hear you're having trouble :( I never received a notification about your post, are you still having trouble? If so please post some code with the original graph so we can figure it out!

@Petit-Pas
Copy link

End of 2021 and this is still super relevant, Thanks! 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment