Export to html question

Question

Hello everyone,

My question would be as followed and i was wondering if there was someone who had an answer for me,

I have created several flowcharts which are connected in yEd by internal links to the graphml files that i have created with yEd.

Now when i export my flowcharts that i made to HTML image map or HTML flash viewer, the internal links don't point towards those files that i exported.

i.e. test.graphml has 2 nodes, which point to test1.graphml and test2.graphml. Once all exported my browser tries to find d:/flowcharts/test/test1.graphml instead of the exported HTML file.

My current workaround is that in all my flowcharts that i have links to other flowcharts, i link to the HTML files so that in a browser, i can "brwose" through these flowcharts. One problem with this, if i want to change anything within my flowcharts, i have to manually open up the graph file instead of using to "go to url" function inside yEd, because that will open up my browser instead of opening the file in yEd.

Is there any solution for this so i can save my original as is with the internal links, but still provide the proper links once i export to HTML?

 

Tech

Answer 1

yEd cannot automatically adjust URLs on export to HTML.

What you can do is to add two custom properties ("Edit" -> "Manage Custom Properties") of type text to your nodes. Then copy the URL values into the first property. Use the corresponding HTML file name in the second property. (To edit values of custom properties, select a node, then go to the properties table in yEd lower right corner.)
Now, before exporting to HTML, use the properties mapper ("Edit" -> "Properties") mapper to overwrite all URL values with the values of the second property (which stores HTML file names). Then export. Finally, use the properties mapper once again to overwrite the new URL value with the values of the first property (which stores the original file names).

Comments

First of all thank you for the tip and explanation of the custom mapper tool.

I've messed around with it a little bit and figured out how to use it, and for me i think this is a nice solution since i won't be changing everything all the time and this would save me alot of time.

I do have 1 question about the custom properties mapper.

Lets say i have this url i have as "internal" link: d:\testflow\test1.graphml
And i have the second property set to "html" link: d:\testflow\test1.html

Now if i will publish this to the web, it will try to connect to my D:\ hard drive correct? So i would have to put in the domain instead of my D:\ drive to have it working online.

So is there a way i can replace all the second properties with www.domain.com\testflow\test1.html?

thanks alot!

---

It should be possible to use relative paths. E.g. if all your *.graphml files are in the same directory and you export all your HTML files to a second directory, you can use "test1.graphml" and "test1.html" respectively (without the quotes) as values.

---

Hmm that opens up new ideas.

My *.graphml files are located in a directory structure. So lets say i have:

d:/flowcharts/dir1/dir2/dir3

Would it be possible to to put the URL as /dir1/dir2/dir3/*.graphml? i will test it out one i get home later on, but maybe you know the answer as is.

On a side note for the properties mapper and custom properties, they get deleted upon program shutdown :(

I mapped all my flowcharts with 2 custom properties and made sure everything could be mapped with a few clicks, then i saved everything and restarted yEd because it was getting slow. All the sudden my custom properties were all gone :(

---

/dir1/dir2/dir3/*.graphml would be the wrong path (a relative path may never start with /). The right path depends on the location of the current diagram.

Configurations for the properties mapper and custom properties normally do not get deleted when you quit yEd.
Configurations for the properties mapper are stored in the yEd profile directory on quit and will be available again for all diagrams when restarting yEd.
Custom properties are stored in the diagram. So, a new diagram will have no custom properties, but opening a diagram previously saved as GraphML file will have its custom properties restored.
If you want a shortcut for creating the same custom properties for each and every diagram, create a new (empty) diagram, add the desired custom properties, save the (empty) diagram as GraphML, and use the resulting GraphML file as template for all new diagrams.

---

I've changed up my way of working and mapped all properties to the html and open up files from my explorer. I'm 100% sure that the custom properties were saved before i quit yEd because i've tested it out in another way.

I made 2 custom properties ( one internal links to graphml files, and other to HTML files ) and i saved the document. Closed all open documents ( but did not close yEd ) and opened up a document with 2 custom properties and everything was fine, then restarted yEd and opened up the same document again, all custom properties were gone.

I haven't figured out the relative paths thing yet. My current directory tree stup is :

d:/Tech Gaming TV/Flowcharts/All builds/Index.graphml

I have 3 directories inside the "all builds" folder which are:
Zerg
Protoss
terran

Within these dirs i have even deeper seeded dirs but for this post sakes i don't think i have to name them all.

so my protoss graphml file is located in:

d:/Tech Gaming TV/Flowcharts/All builds/protoss/protoss.graphml

i tried using:
all builds/protoss/protoss.graphml
and protoss/protoss.graphml

but neither worked for me at that point.

any suggestions?

---

If you want to reference
  d:/Tech Gaming TV/Flowcharts/All builds/protoss/protoss.graphml
from
  d:/Tech Gaming TV/Flowcharts/All builds/Index.graphml
then the required relative path is
  protoss/protoss.graphml

If you want to reference protoss.graphml from a directory other than d:/Tech Gaming TV/Flowcharts/All builds, you will have to change the relative path as appropriate. E.g. if you want to reference said file from
  d:/Tech Gaming TV/Flowcharts/All builds/zerg/zerg.graphml
then the required relative path is
  ../protoss/protoss.graphml

You are using the latest version of yEd (3.10.2 as of this writing), right?

---

I've checked and yes i'm running lastest version ( 3.10.2 ).

I've noticed a fault on my part, the first relative paths i've used were actually working as intended, but if i went deeper into the directories i had to remove the former directories from the relative path and then it worked.

so my relative path for protoss.graphml is protoss/protoss.graphml and it works.

Seeing your second part of your reply makes me think if i can universally apply the ../protoss/protoss.graphml instead of using different relative paths for everything.

also i'm writing *.graphml but i'm exporting all to html because i want to make a flowchart on a website with all links intact to different flowcharts, and that brings me to my follow up question. Please say so if this should be in a new thread or not.


I've made a basic setup which is working on techgtv.comeze.com and so far i'm ok with how everything looks/feels etc. but i would like to embed the graphml viewer into a webpage, and on top of that i would like the links to be opened inside the viewer, so that it does not open up a whole new html page. Now i'm really not sure if this is even possible with the free version or that this is only possible with yFiles for xxx licenses.

---

GraphMLViewer is always embedded - see the HTML files generated by yEd when you export your diagram to "HTML Flash Viewer (*.html)" format.

It is currently not possible to open links inside the GraphMLViewer. The best you can do is to open links inside the current tab/window. To do so, make sure you have "Open Links In New Window" on tab "Viewer" deactivated when exporting.


Re:
> Seeing your second part of your reply makes me think if i can universally
> apply the ../protoss/protoss.graphml instead of using different relative
> paths for everything.

I am not sure what you mean by that, but (as I tried to explain several times now) relative paths always depend on both, the location of the current file and the location of the linked file. So, if you if you want to reference protoss.graphml from
  d:/Tech Gaming TV/Flowcharts/All builds/zerg/foo/bar/baz.grapml
the relative path
  ../protoss/protoss.graphml
will *not* work. In this case, you will need to use
  ../../../protoss/protoss.graphml

---

yeah my wording was not the best, but you did answer the question.

I am currently have the "open links in new window" unchecked at it opens the linked HTML files inside the same tab and for the time being it works.

again thanks alot for your help, it really helped me with some issues i have and now i can work with the flowcharts in a more effective manner.