Simple html tag

You can use Gravizo including an image tag <img src='https://g.gravizo.com/svg? follow by a graph description writed in DOT, PlantUML or UMLGraph, and then close the image tag

<img src='https://g.gravizo.com/svg?
 digraph G {
   main -> parse -> execute;
   main -> init;
   main -> cleanup;
   execute -> make_string;
   execute -> printf
   init -> make_string;
   main -> printf;
   execute -> compare;
 }
'/>

Using markdown syntax in github.com

Also can use Markdown syntax including a image tag and then the url content include DOT, PlantUML or UMLGraph syntax. Don't forget to close the image tag.

![Alt text](https://g.gravizo.com/svg?
  digraph G {
    size ="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;
  }
)
DOT sample with Gravizo

Use it on you README.md at github to show the graph directly in your home page. Here is a sample

Using indirect markdown syntax in bitbucket.org

Use http://gravizo.com/source/svg/custom_mark?source_url_url_encoded to point source_url_url_encoded where is the source for the graph. Use custom_mark to delimit where the source is. Also include a blank image to hide source if you want.

![Alt text](https://g.gravizo.com/source/svg/thiisthemark?http%3A%2F%2Fwww.gravizo.com)
![Alt text](http://www.gravizo.com/img/1x1.png#

thiisthemark        
@startuml
object Object01
object Object02
object Object03
object Object04
object Object05
object Object06
object Object07
object Object08

Object01 <|-- Object02
Object03 *-- Object04
Object05 o-- "4" Object06
Object07 .. Object08 : some labels
@enduml
thiisthemark        
        
Plantuml sample with indirect Gravizo

More at bitbucket.org

<img src='https://g.gravizo.com/svg?
@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
'>
        
PlantUML sample with Gravizo
<img src='https://g.gravizo.com/svg?
/**
*Structural Things
*@opt commentname
*@note Notes can
*be extended to
*span multiple lines
*/
class Structural{}

/**
*@opt all
*@note Class
*/
class Counter extends Structural {
        static public int counter;
        public int getCounter%28%29;
}

/**
*@opt shape activeclass
*@opt all
*@note Active Class
*/
class RunningCounter extends Counter{}
'>
        
UMLGraph sample with Gravizo
@startuml;

(*) --> if "Some Test" then;

  -->[true] "activity 1";

  if "" then;
    -> "activity 3" as a3;
  else;
    if "Other test" then;
      -left-> "activity 5";
    else;
      --> "activity 6";
    endif;
  endif;

else;

  ->[false] "activity 2";

endif;

a3 --> if "last test" then;
  --> "activity 7";
else;
  -> "activity 8";
endif;

@enduml 
        
UMLGraph sample with Gravizo
@gravizosvg
{
  "svg": {
    "@height": "450",
    "@width": "450",
    "@xmlns": "http://www.w3.org/2000/svg",
    "path": [
        { "@id": "lineAB",  "@d": "M 100 350 l 150 -300",
        "@stroke": "red",  "@stroke-width": "3",  "@fill": "none" },
      { "@id": "lineBC",  "@d": "M 250 50 l 150 300",
        "@stroke": "red",  "@stroke-width": "3",  "@fill": "none" },
      { "@d": "M 175 200 l 150 0",  "@stroke": "green",
        "@stroke-width": "3",  "@fill": "none" },
      {  "@d": "M 100 350 q 150 -300 300 0",
        "@stroke": "blue",  "@stroke-width": "5",  "@fill": "none"
      }
    ],
     "g": [
      { "@stroke": "black",  "@stroke-width": "3",  "@fill": "black",
        "circle": [  
            {  "@id": "pointA",  "@cx": "100",  "@cy": "350",  "@r": "3"  },
            {  "@id": "pointB",  "@cx": "250",  "@cy": "50",  "@r": "3"  },
          {   "@id": "pointC",   "@cx": "400",  "@cy": "350",  "@r": "3"  }
        ]
      },
      {
        "@font-size": "30",  "@font-family": "sans-serif", "@fill": "black",
        "@stroke": "none",  "@text-anchor": "middle",
        "text": [
            { "@x": "100",  "@y": "350",  "@dx": "-30",  "$": "A" },
            { "@x": "250",  "@y": "50",   "@dy": "-10",   "$": "B" },
            { "@x": "400",  "@y": "350", "@dx": "30",  "$": "C" }
        ]
      }
    ]
  }
}
        
SVG sample with Gravizo
@startuml;

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

State1 -> State2;
State2 --> [*];

@enduml
        
PlantUML state diagram sample with Gravizo
@startuml;
start;
:Hello world;;
:This is defined on;
several **lines**;;
stop;
@enduml;
        
PlantUML state diagram sample with Gravizo
View

Gravizo will be free for ever, but there are some business requirements, like confidentiality that should be managed in other ways. To support this requirements we have created this options.

Freemium

Free

Business (Cloud)

Enterprise (Cloud or You host)

"Thanks, for the awesome service!"             

Eddie Abou-Jaoude

"Gravizo has become an indispensable tool for me!"

Aaron W.

"This service is awesome! Thanks for making it."

Rob O'Dwyer