{"id":13410455,"url":"https://github.com/TLmaK0/gravizo","last_synced_at":"2025-03-14T16:32:14.407Z","repository":{"id":13944409,"uuid":"16644267","full_name":"TLmaK0/gravizo","owner":"TLmaK0","description":"How to include graphviz graphs in github README","archived":false,"fork":false,"pushed_at":"2022-10-04T06:19:16.000Z","size":35,"stargazers_count":439,"open_issues_count":11,"forks_count":228,"subscribers_count":16,"default_branch":"master","last_synced_at":"2024-10-12T16:34:04.875Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/TLmaK0.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":"TLmaK0"}},"created_at":"2014-02-08T13:56:41.000Z","updated_at":"2024-09-08T14:26:28.000Z","dependencies_parsed_at":"2023-01-11T18:42:01.792Z","dependency_job_id":null,"html_url":"https://github.com/TLmaK0/gravizo","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TLmaK0%2Fgravizo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TLmaK0%2Fgravizo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TLmaK0%2Fgravizo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TLmaK0%2Fgravizo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TLmaK0","download_url":"https://codeload.github.com/TLmaK0/gravizo/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243610216,"owners_count":20318923,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-30T20:01:07.047Z","updated_at":"2025-03-14T16:32:14.058Z","avatar_url":"https://github.com/TLmaK0.png","language":null,"funding_links":["https://github.com/sponsors/TLmaK0"],"categories":["Others","miscellaneous"],"sub_categories":[],"readme":"gravizo\n=======\n\nHow to include graphviz graphs in github README.md\n\n### New Plantuml activity Diagram ###\n![Alt text](https://g.gravizo.com/source/custom_mark21?https%3A%2F%2Fraw.githubusercontent.com%2FTLmaK0%2Fgravizo%2Fmaster%2FREADME.md)\n\n```\n![Alt text](https://g.gravizo.com/source/custom_mark21?https%3A%2F%2Fraw.githubusercontent.com%2FTLmaK0%2Fgravizo%2Fmaster%2FREADME.md)\n\n\u003cdetails\u003e \n\u003csummary\u003e\u003c/summary\u003e\ncustom_mark21\t\n@startuml\nstart\n:init;\n-\u003e test of color;\nif (color?) is (\u003ccolor:red\u003ered) then\n:print red;\nelse \n:print not red;\nnote right: no color\nendif\npartition End {\n:end;\n}\n-\u003e this is the end;\nend\n@enduml\ncustom_mark21\n\u003c/details\u003e\n```\n\n### Other plantuml syntax (wbs, gantt, salt, ...) ###\n\n![Alt text](https://g.gravizo.com/source/custom_mark20?https%3A%2F%2Fraw.githubusercontent.com%2FTLmaK0%2Fgravizo%2Fmaster%2FREADME.md)\n\n```\n![Alt text](https://g.gravizo.com/source/custom_mark20?https%3A%2F%2Fraw.githubusercontent.com%2FTLmaK0%2Fgravizo%2Fmaster%2FREADME.md)\n\u003cdetails\u003e \n\u003csummary\u003e\u003c/summary\u003e\ncustom_mark20\t\n@startwbs\n* Business Process Modelling WBS\n** Launch the project\n*** Complete Stakeholder Research\n*** Initial Implementation Plan\n** Design phase\n*** Model of AsIs Processes Completed\n**** Model of AsIs Processes Completed1\n**** Model of AsIs Processes Completed2\n*** Measure AsIs performance metrics\n*** Identify Quick Wins\n** Complete innovate phase\n@endwbs\ncustom_mark20\n\u003c/details\u003e\n```\n\nYou can use indirect way to refer a source file as graph description. \n\nUse this syntax: ```![Alt text](https://g.gravizo.com/source/\u003ccustom_mark\u003e?\u003curl_source_url_encoded\u003e```). And use html comment or summary tag ```\u003cdetails\u003e\u003csummary\u003e\u003c/summary\u003e\u003c/details\u003e``` (you can use html comments but some graphs uses --\u003e) to hide the source followed by your description graph in [DOT syntax](https://en.wikipedia.org/wiki/DOT_(graph_description_language)), [UMLGraph](http://www.umlgraph.org/doc/cd-intro.html), [PlantUML](http://plantuml.sourceforge.net/sequence.html) or [SVG](https://en.wikipedia.org/wiki/Scalable_Vector_Graphics) :\n\n![Alt text](https://g.gravizo.com/source/custom_mark10?https%3A%2F%2Fraw.githubusercontent.com%2FTLmaK0%2Fgravizo%2Fmaster%2FREADME.md)\n\n\n```\n![Alt text](https://g.gravizo.com/source/custom_mark10?https%3A%2F%2Fraw.githubusercontent.com%2FTLmaK0%2Fgravizo%2Fmaster%2FREADME.md)\n\u003cdetails\u003e \n\u003csummary\u003e\u003c/summary\u003e\ncustom_mark10\n  digraph G {\n    size =\"4,4\"\n    main [shape=box]\n    main -\u003e parse [weight=8]\n    parse -\u003e execute\n    main -\u003e init [style=dotted]\n    main -\u003e cleanup\n    execute -\u003e { make_string; printf}\n    init -\u003e make_string\n    edge [color=red]\n    main -\u003e printf [style=bold,label=\"100 times\"]\n    make_string [label=\"make a string\"]\n    node [shape=box,style=filled,color=\".7 .3 1.0\"]\n    execute -\u003e compare\n  }\ncustom_mark10\n\u003c/details\u003e\n```\n\nThis allows to include your graphs in the README and is still readable in a normal text editor.\n\n**SVG output** it's ready. Only need to replace https://g.gravizo.com/g? by https://g.gravizo.com/svg? and https://g.gravizo.com/source? by https://g.gravizo.com/source/svg?\n\n![Alt text](https://g.gravizo.com/source/svg/custom_mark12?https%3A%2F%2Fraw.githubusercontent.com%2FTLmaK0%2Fgravizo%2Fmaster%2FREADME.md?3)\n\n```\n![Alt text](https://g.gravizo.com/source/svg/custom_mark12?https%3A%2F%2Fraw.githubusercontent.com%2FTLmaK0%2Fgravizo%2Fmaster%2FREADME.md)\n\u003cdetails\u003e \n\u003csummary\u003e\u003c/summary\u003e\ncustom_mark12\n/**\n*Structural Things\n*@opt commentname\n*@note Notes can\n*be extended to\n*span multiple lines\n*/\nclass Structural{}\n\n/**\n*@opt all\n*@note Class\n*/\nclass Counter extends Structural {\n        static public int counter;\n        public int getCounter();\n}\n\n/**\n*@opt shape activeclass\n*@opt all\n*@note Active Class\n*/\nclass RunningCounter extends Counter{}\ncustom_mark12\n\u003c/details\u003e\n```\n\nA sequence diagram.\n\n![Alt text](https://g.gravizo.com/source/custom_mark13?https%3A%2F%2Fraw.githubusercontent.com%2FTLmaK0%2Fgravizo%2Fmaster%2FREADME.md?1)\n\n```\n![Alt text](https://g.gravizo.com/source/custom_mark13?https%3A%2F%2Fraw.githubusercontent.com%2FTLmaK0%2Fgravizo%2Fmaster%2FREADME.md)\n\u003cdetails\u003e \n\u003csummary\u003e\u003c/summary\u003e\ncustom_mark13\n@startuml\nactor User\nparticipant \"First Class\" as A\nparticipant \"Second Class\" as B\nparticipant \"Last Class\" as C\nUser -\u003e A: DoWork\nactivate A\nA -\u003e B: Create Request\nactivate B\nB -\u003e C: DoWork\nactivate C\nC -\u003e B: WorkDone\ndestroy C\nB -\u003e A: Request Created\ndeactivate B\nA -\u003e User: Done\ndeactivate A\n@enduml\ncustom_mark13\n\u003c/details\u003e\n```\n\nAn activity diagram:\n\n![Alt text](https://g.gravizo.com/source/custom_activity?https%3A%2F%2Fraw.githubusercontent.com%2FTLmaK0%2Fgravizo%2Fmaster%2FREADME.md?1)\n\n```\n![Alt text](https://g.gravizo.com/source/custom_activity?https%3A%2F%2Fraw.githubusercontent.com%2FTLmaK0%2Fgravizo%2Fmaster%2FREADME.md)\n\u003cdetails\u003e \n\u003csummary\u003e\u003c/summary\u003e\ncustom_activity\n@startuml;\n(*) --\u003e if \"Some Test\" then\n  --\u003e[true] \"activity 1\"\n  if \"\" then\n    -\u003e \"activity 3\" as a3\n  else\n    if \"Other test\" then\n      -left-\u003e \"activity 5\"\n    else\n      --\u003e \"activity 6\"\n    endif\n  endif\nelse\n  -\u003e[false] \"activity 2\"\nendif\na3 --\u003e if \"last test\" then\n  --\u003e \"activity 7\"\nelse\n  -\u003e \"activity 8\"\nendif\n@enduml\ncustom_activity\n\u003c/details\u003e\n```\n\nNow also suports SVG in JSON format:\n\n![Alt text](https://g.gravizo.com/source/custom_svg?https%3A%2F%2Fraw.githubusercontent.com%2FTLmaK0%2Fgravizo%2Fmaster%2FREADME.md?1)\n\n```\n![Alt text](https://g.gravizo.com/source/custom_svg?https%3A%2F%2Fraw.githubusercontent.com%2FTLmaK0%2Fgravizo%2Fmaster%2FREADME.md)\n\u003cdetails\u003e \n\u003csummary\u003e\u003c/summary\u003e\ncustom_svg\n@gravizosvg\n{\"svg\": {\n\t\t\"@height\": \"450\",\n\t\t\"@width\": \"450\", \n\t\t\"path\": [\n\t\t\t{\"@id\":\"lineAB\", \"@d\": \"M 100 350 l 150 -300\", \"@stroke\":\"red\"},\n\t\t\t{\"@id\":\"lineBC\", \"@d\": \"M 250 50 l 150 300\", \"@stroke\":\"red\"},\n\t\t\t{\"@d\":\"M 100 350 q 150 -300 300 0\", \"@stroke\":\"blue\", \"@fill\":\"none\"}\n    ],\n\t\t\"g\": [\n\t\t\t{\"@stroke\":\"black\", \"circle\":[  \n\t\t\t\t{\"@id\":\"pointA\", \"@cx\":\"100\", \"@cy\":\"350\", \"@r\":\"3\"},\n\t\t\t\t{\"@id\":\"pointB\", \"@cx\":\"250\", \"@cy\":\"50\", \"@r\":\"3\"},\n\t\t\t\t{\"@id\":\"pointC\", \"@cx\":\"400\", \"@cy\":\"350\", \"@r\":\"3\"}\n\t\t\t]},\n\t\t\t{\"text\": [\n\t\t\t\t{\"@x\":\"100\", \"@y\":\"350\", \"@dx\":\"-30\", \"$\":\"A\"},\n\t\t\t\t{\"@x\":\"250\", \"@y\":\"50\", \"@dy\":\"-10\", \"$\":\"B\"},\n\t\t\t\t{\"@x\":\"400\", \"@y\":\"350\", \"@dx\":\"30\", \"$\":\"C\"}\n\t\t\t]}\n\t\t]\n\t}\n}\ncustom_svg\n\u003c/details\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FTLmaK0%2Fgravizo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FTLmaK0%2Fgravizo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FTLmaK0%2Fgravizo/lists"}