Clickable flow chart

  • Does anyone know how to build an interactive flow chart for a WP post or page?

    Is there a plugin? (So far I haven’t been able to find one.)
    Or can it be done in another programme (what?) and inserted into a WP page or post?

    I want some text in a box at the top.
    Probably arrow down to another text box. Have a link in that box to take me to another post/page with some background information. And I’d have a link on that page to bring people back to the flow chart.
    Arrows to several text boxes that people will choose between and that each link to individual pages/posts for further information.

    And so on.

    It would take me forever just to use html to make coloured text boxes. Let alone trying to lay them out on the page. And I’ve no idea how to generate arrows. Or to make them different shapes.

    Thanks.

Viewing 1 replies (of 1 total)

  • I haven’t seen a plugin for this.

    What you’re describing sounds simple enough that you could create the graphic in something like Photoshop or GIMP (a free, open-source image manipulation program), then add an image map for the links, and finally putting the image and image map HTML into your post. The “title” attribute for each image area is helpful to give the user instructions about the various active elements in the image map.

    To create the arrows in the graphic editor, you can use “brushes” that are arrow shaped, can be sized, and come in a variety of colors that make the process easy. I know you can download free arrow brushes for GIMP, because I’ve done it. I’m sure there are some for Photoshop too. The image editors have great support for colored boxes and text is only limited to the fonts you load on your machine.

    You may want to make the flow chart more interactive by highlighting areas when the user hovers over them. I’ve had good luck using the jQuery-based ImageMapster in WordPress to do that. It also allows you to resize the image if you want your flow chart to be mobile-friendly; i.e., re-size it based on the display.

    If it would take you forever to do this in HTML, you might want to hire a developer to do it for you. It’s really not that big a project for someone who is used to using GIMP, is comfortable with HTML, and can enqueue some scripts in WordPress to get it working.

    Finally, if you want the content of the flow chart to be indexable by the search engines, you would include a hidden (via CSS) text version of its content with links to the other pages for the search bots.

Viewing 1 replies (of 1 total)
  • The topic ‘Clickable flow chart’ is closed to new replies.