Gravizo is a really cool tool to display graphs in your README.
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; } )
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
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.
- The
for the original!
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
In your markdown document
will give us
Remembering that we are just putting together three simple parts from How do I Cheat?.
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 -->
Proof of concept, here is that exact code now:
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.
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.
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
- 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.
Excelent!