Make it easier to share/enhance blockdiag diagrams

[techtonik]

Blockdiag is a tool for creating diagrams, and it only allows to save SVG. GitHub and other sites have troubles with rendering SVG images, so it should be specially formatted for GitHub markup, but a more convenient way is to add an option to render as PNG.

https://bitbucket.org/blockdiag/blockdiag_interactive_shell/issues/4/save-as-png

[techtonik]

See badges/shields#507 for example of embedding and optimizing SVG for GitHub.

Looks like Firefox 57.0 has troubles rendering that, or maybe something changed on GitHub side. Badges below should display logo at the left:

[techtonik]

Here is how to draw data URL to canvas: https://stackoverflow.com/questions/4773966/drawing-an-image-from-a-data-url-to-a-canvas

Note that if width/height is not set on <svg>element, then Firefox 57.0 renders canvas empty - see http://phrogz.net/SVG/svg_to_png.xhtml

A solution could be to copy svg and set them with DOM.

[abitrolly]

Some good tools that can help:

• https://github.com/knsv/mermaid
• http://ditaa.sourceforge.net/

[abitrolly]

Seems like the problems is solved with these tools.

• https://kroki.io/examples.html
• https://mermaid.live/