search

mermaidjs / mermaid-live-editor

Location has moved to https://github.com/mermaid-js/mermaid-live-editor
https://mermaidjs.github.io/mermaid-live-editor/
MIT License
977 stars 181 forks source link

Embed SVG in Github #23

Open dderiso opened 6 years ago

dderiso commented 6 years ago

Dear Mermaid Team,

Thanks for the awesome product! I really want to upload these images into our github wiki and repo docs. Right now, when I try to embed them, I get this:

![Chart](https://mermaidjs.github.io/mermaid-live-editor/#/view/Z3JhcGggVEQKQVtDaHJpc3RtYXNdIC0tPnxHZXQgbW9uZXl8IEIoR28gc2hvcHBpbmcpCkIgLS0-IEN7TGV0IG1lIHRoaW5rfQpDIC0tPnxPbmV8IERbTGFwdG9wXQpDIC0tPnxUd298IEVbaVBob25lXQpDIC0tPnxUaHJlZXwgRltDYXJdCg)

Chart

If were made like JS-fiddle, where the url syntax is something like

https://mermaidjs.github.io/<hash>/embed/<image:svg,png,jpg>

it would be super easy. Especially if 

https://mermaidjs.github.io/<hash>

would take me to the editor page so I could modify the chart.

Thank you so much for considering!

tylerlong commented 6 years ago

It is a good idea. However the mermaid live editor is a pure client side project. I don't know if it is doable without any server side code.

Maybe in the future we can release a new service with server side code.

revolunet commented 6 years ago

https://github.com/mermaidjs/mermaid-cli use peppeteer and is capable of generating chart output based on text so you could totally make a microservice to serve ondemand pngs/svgs for GitHub and other sources.

btw it would be very cool to have a "pure" javascript SVG generation from input graph text. i dont know much of d3 but looks like its Node compatible so this sounds possible !

Some alternatives though :

revolunet commented 6 years ago

made a little PoC here : https://github.com/revolunet/mermaid-api

jihchi commented 4 years ago

FYI.

I've made a PR and service to support embed image from code (#52).

You can now directly use base64 encoded mermaid code and get the image from mermaid.ink service:

For example, get base64 encoded mermaid code from mermaid-live-editor:

c2VxdWVuY2VEaWFncmFtCiAgICBwYXJ0aWNpcGFudCBBbGljZQogICAgcGFydGljaXBhbnQgQm9iCiAgICBBbGljZS0-Sm9objogSGVsbG8gSm9obiwgaG93IGFyZSB5b3U_CiAgICBsb29wIEhlYWx0aGNoZWNrCiAgICAgICAgSm9obi0-Sm9objogRmlnaHQgYWdhaW5zdCBoeXBvY2hvbmRyaWEKICAgIGVuZAogICAgTm90ZSByaWdodCBvZiBKb2huOiBSYXRpb25hbCB0aG91Z2h0cyA8YnIvPnByZXZhaWwuLi4KICAgIEpvaG4tLT5BbGljZTogR3JlYXQhCiAgICBKb2huLT5Cb2I6IEhvdyBhYm91dCB5b3U_CiAgICBCb2ItLT5Kb2huOiBKb2xseSBnb29kIQ

append the code after https://mermaid.ink/img/, for example:

https://mermaid.ink/img/c2VxdWVuY2VEaWFncmFtCiAgICBwYXJ0aWNpcGFudCBBbGljZQogICAgcGFydGljaXBhbnQgQm9iCiAgICBBbGljZS0-Sm9objogSGVsbG8gSm9obiwgaG93IGFyZSB5b3U_CiAgICBsb29wIEhlYWx0aGNoZWNrCiAgICAgICAgSm9obi0-Sm9objogRmlnaHQgYWdhaW5zdCBoeXBvY2hvbmRyaWEKICAgIGVuZAogICAgTm90ZSByaWdodCBvZiBKb2huOiBSYXRpb25hbCB0aG91Z2h0cyA8YnIvPnByZXZhaWwuLi4KICAgIEpvaG4tLT5BbGljZTogR3JlYXQhCiAgICBKb2huLT5Cb2I6IEhvdyBhYm91dCB5b3U_CiAgICBCb2ItLT5Kb2huOiBKb2xseSBnb29kIQ

you will get the jpg image:

Mermaid Ink

dderiso commented 4 years ago

Awesome work @jihchi !!!!!