How exactly to start using it for Readme?

[satyajituk]

I am absolute beginner in this. Can someone tell me what exact step I need to take to generate flow diagrams in my readme in my project? Of course just copying the example doesn't work. Thanks

[adrai]

Create it here: https://flowchart.js.org/ And save the image of the flowchart, then add that image to the readme

[satyajituk]

Thanks @adrai I actually wanted to have the image's boxes clickable which open links. Just like how your Readme is doing. How can I do that?

[adrai]

In which readme? In this (https://github.com/adrai/flowchart.js/blob/master/README.md) readme it's just a svg image

[satyajituk]

Yes I meant that readme. Ok. If I right click I see no option to save as svg image or something? Is there any other way to save the image as a vector file in https://flowchart.js.org/ ?

[adrai]

copy that svg element

[satyajituk]

That works! Thanks! It comes out to be a huge chunk of text though. I assume that's normal right? Thanks for the help!

[adrai]

Yes, this is an svg... a file with that content and file extension .svg

[satyajituk]

So I copied and saved as file.svg Then in my readme I did: ![Alt text](file.svg) I can see the image now in readme but it is not clickable the way I expected. If I click it simply opens the file.svg and that itself doesn't seem clickable at various boxes. Did I do something wrong?

[adrai]

How did you configured the link?

st=>start: Start:>http://www.google.com[blank] e=>end:>http://www.google.com

without blank it should work (at least it works in my readme)

[satyajituk]

What I meant to say that in https://flowchart.js.org/ you can actually click on start and it opens google.com in a new tab. This functionality seems to be missing with including svg in readme. It is same for your readme as well as my readme.

Because when I click even on your readme, I dont go to google.com but rather the svg opens in another tab.

[adrai]

Yes, I can confirm this. But I don’t know why. But if I click on “End” it works 🤷‍♂️

On 10 Feb 2020, at 11:51, satyajituk notifications@github.com wrote:



What I meant to say that in https://flowchart.js.org/ you can actually click on start and it opens google.com in a new tab. This functionality seems to be missing with including svg in readme. It is same for your readme as well as my readme.

Because when I click even on your readme, I dont go to google.com but rather the svg opens in another tab.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/adrai/flowchart.js/issues/197?email_source=notifications&email_token=AAIJF4XGQHCEWD7Z7XYBFCDRCEXKLA5CNFSM4KRN274KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOELICOZA#issuecomment-584066916, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AAIJF4S7OWW6RDKAM7FPE53RCEXKLANCNFSM4KRN274A.

[satyajituk]

Oh, for me none works. Not even End. No matter where I click, it only opens the svg in another tab. Are you saying if you click on End on your Readme then it works? I will try with different browser to try luck. Now I am using Chrome.

[adrai]

Oh no... it is not working either... sorry for the confusion.

[satyajituk]

The only workaround solution I found is to rightclick on the svg shown in readme and select open image in new tab. After it opens in the new tab, then it is clickable individually as we expect. So it is some issue of github and its readme not being able to show an svg properly.

Another way can be just to have a raster format of the image which links to the link when it opens in a new tab so that when a user simply clicks on the image the "correct" vector format opens.

Let me know if you have any more innovative idea. And thanks for responding so quickly to my queries! :)

[satyajituk]

Is it possible to include a small image in the condition or any boxes? Or only texts are possible? Thanks!

[adrai]

only text