I have a friend who has like 250 hyperlinked flowcharts. He wants to put them into a web app. The thing is, it needs to be simple HTML. There are some websites out there for flowchart HTML, but the HTML they produce is a mess.

He is not a programmer type. He wants to work in a GUI, not with text files.

I'm wondering if there is a tool out there that would give us a chance of accomplishing this. Basically, it would let us define templates like "yellow hyperlinked flowchart box" and "arc-shaped arrow between two boxes", then he could put building blocks like that together to form his flowcharts.

He has also tried making the flowcharts in PowerPoint, then exporting. Again, the HTML is a mess, and it uses a lot of images, which is bad.

  • Automatically generated code(e.g. created with a GUI) is always messy. Learning HTML isnt too hard so maybe convince him to try and learn it :)
    – SitiSchu
    Commented May 30, 2017 at 10:51

2 Answers 2


It seems to me like photoshop would do just what you want. ( Depending on how far he would have to go with it of course... )

In photoshop you can take the Slice tool enter image description here and 'draw' boxes around the areas you want to use. Not just the ones you want to use as links, but all the areas/images you want to be shown in the document later on.

This is done in PS cs5 and I'm not sure if there are any major differences in the web saving options in lower versions.

1. Slice it, Slice it real good.

So here I have selected 4 different areas with the slice tool ( The ones with blue boxes. Other areas are just extra filling, ignore those. Focuse on the areas that you need. )

Yes, there is an empty slice there, I'll get to that later on.

enter image description here

2. Linking - Slice options

You can then use the Slice Select tool enter image description here ( you can also change slice tool into slice select tool temporarily by pressing Ctrl )

Double clicking your sliced areas will open up Slice options.

You might want to check out which ones are the ones you want to fill in, but you really need to only use the url box to set url. ( hovering over the areas will show tooltips and a bit more info about what they do )

Note that Name is automatically (as default) used as class name (in this case)

enter image description here

Now, about that empty slice.. In the slice options there's Slice type:, if you change that to No image You can insed text inside that area. ( Bad thing about this feature is that if you're not going to edit a single thing in the produced html file you pretty much need to guess the text size/amount because it is not shown until you save it later. )

enter image description here

3. Producing html - Save for web

Saving should happen with the Save for web feature.

from the top menu: File > Save for web & devices ( Ctrl+Shift+Alt+S )

Here comes the important part

  1. There's the Slice Select tool again, wile pressing shift use that to select all the slices that you want to use. ( The ones marked with blue colors. ) Once you've succesfully selected a slice, the outline of it will turn brown.

    When you've succesfully selected everything you need press [Save]

    enter image description here

  2. These two things are very important for you to select

    Format: HTML and Images.

    Slices: Selected slices.

    enter image description here

  3. Click the middle one and select Other

    enter image description here

  4. Under Select: there's a drop down menu which will have different settings, the important things in in this instance are HTML and Slices

    The following images show the things you should at least select.

    enter image description here

    enter image description here

    After everything is set, you can save it by pressing the [Save...] button and then naming it.

  5. Then you can find it in the middle from the list and save away. ( I named mine SaveUI )

    enter image description here

Heres the produced html: http://photoshopmesta.net/1/webby/

The code it produces isn't as neat as it could be if written manually, but it should do.


I don't get the question really. Sounds like your'e looking for flowchart web apps. Which has little to do with design and is more about project management. There are apps, like Pencil, out there for wire framing, but they aren't based on a web interface. Why the need for a web intercase? And I suspect, this would take some custom programming.

Perhaps you're simply looking for something like Mockingbird A google search for web-based wireframing will result in several options.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.