phyunsj / embedding-gravizo-graph

embedding gravizo graphs in readme (for my own reference)

What is Gravizo?

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. ... from http://www.gravizo.com

Related Posts

• How to include graphviz graphs in github README
• Sequence Diagram Example
• ⚠️ Having trouble using Gravizo? Cheat the system ⚠️

Example

1. Sequence Diagram

![Alt text](https://g.gravizo.com/svg?
@startuml;
hide footbox;
autonumber;
actor User;
box "External Service";
participant "Proxy Service A" as A;
participant "Transport" as B;
end box;
box "Internal Service";
participant "Transport" as C;
participant "Service Handler" as D;
end box;
participant "Service A" as E;
... ...;
User -> A: Service Request;
activate A;
A -> B: Create Request/XDR encode;
note over A: switch req->op;
activate B;
B -> C: zmq_send;
activate C;
C -> D: XDR decode/Create Request;
activate D;
note over D;
switch req->op;
end note;
D -> E;
activate E;
D <--E;
deactivate E;
D --> C: XDR encode;
deactivate D;
C --> B: zmq_receive;
deactivate C;
B --> A: XDR decode;
deactivate B;
A --> User: Service Response;
deactivate A;
ref over A;
 test_add:calc_client.cpp;
end ref;
ref over D,E;
 serve:calc_server.cpp;
end ref;
...;
@enduml
)

🌟 Credit to Stephen McDowell for this guide.

 $ python
Type "help", "copyright", "credits" or "license" for more information.
>>> raw = '''  INSERT YOUR SEQUENCE DIAGRAM    '''
>>> import urllib
>>> urllib.quote(raw)
' ... USE THIS OUTPUT FOR GITHUB README ...'

Basically, convert @startuml;...@enduml with urllib.quote() and insert between ![Alt text](https://g.gravizo.com/svg? and ).

2. Diagram Graph

💡 Use <img> tag instead to adjust the size of a diagram.

<p align="center">
<img  width="650px" alt="Alt Text" src="https://g.gravizo.com/svg?...."/>
<p>