What diagram to use if I want to describe a GUI without actually drawing the GUI

Evaluating VP-UML 7.1,

As the subject line says, what diagram can I use if I want to describe a GUI without actually drawing the GUI. I noticed the “GUI” diagrams but drawing GUI’s take too much time and it would simply duplicate the effort. I simply want to tell the programmer how I expect the GUI to behave, how the GUI should be organized, and possibly give hints on implementation. I used to do this using pen-and-paper, drawing a very ugly and unrefined version of the GUI, paying attention to structure and ignoring proportions.

Example: Let’s say I’m working on Windows XP and I want to tell an programmer how to make the GUI for the Windows Explorer. Let’s say I want the version with the folders list on the left and the detailed pane on the right. I’ll need to tell the programmer I want him to place an Tree control on the left, give him hints on how to program that using the underlying data structures, tell him that I want an ListView on the right and that the list view will have an variable number of columns. Again give hints on how to implement the variable column list. Coding hints are best given using links to class diagrams, or flow diagrams where needed. Or simple call-out text balloons.

This is a vague question but I can’t express it any better.

Thank you,
Cosmin Prund

Hi cosminprund,

Thank you for posting. You can make use of the User Interface designer to design your UI, even a raw one. I will prepare a movie to show you how to do as soon as I can.

Best regards,

Hi cosminprund,

Sorry for my late reply. Below is a movie to show you how to make use of User Interface diagram to construct a screen mock up in quick:

As you see, you can make use of callout shapes for adding your implementation hints. If you want, you also can add reference to other diagrams, such as class diagram, to model the detailed implementation of UI components. You can see I setup the UI with sample data. This function is newly added after we have read your post (You cannot find it yet :slight_smile: ), and will be available in the next hotfix. We want to make it easier to build UI through the use of sample data. If you have any suggestions, feel free to raise and we will consider to support more kinds of sample data.

Finally, if you think that User Interface diagram is not desired, you may consider using the freehand shapes. Please read the image for sample.

Hope this helps. Enjoy!

Best regards,


Thank you, it looks grate!

Hi cosminprund,

You’re welcome. If you need other helps, please feel free to contact us.

Best regards,

I am really looking for more a real life prototype

Eg -how to manage the navigation
- can I export to generated HTML?

Does VP support this?

This would provide me with an easy way to show a demo of the application.
Also the export to HTML would not require to install for each user a VP reader
Also it is a lot closer to a prototype then a document export.

Can you tell me if VP can do this?

Thanks in advance

Hello JoachimKnoops,

Do you mean the navigation between different user interface diagram?

About the export HTML, we support export the project into HTML document via HTML report generation ( http://www.visual-paradigm.com/product/vpuml/provides/docgen.jsp#htmlreport ), or export to a fully navigable HTML portal via Project Publisher ( http://www.visual-paradigm.com/product/vpuml/provides/docgen.jsp#publishproject ). With the Project Publisher, you can browse your diagrams in web browser with similar navigation as within the application (i.e. all reference between elements and diagrams are maintained in your published HTML portal).

It will be great if you can give us more details about your requirement on the navigation (perhaps send us some example on what you want to do) so that we can give you more suggestions. Feel free to contact me if you need any help.

Best regards,


I mean to be able to export the page in HTML so I can place it on a server and it looks like an application.
No need for documentation just really screeens that are clickable

For example what the tool flairbuilder does, also possible with visio to a certain extend, or iplotz goes also far in this.

Navigation: Indeed between different user interface diagrams (just screens/pages)
Navigation like in the application:
click and here comes the next page
click and the dropdown opens up
click and another tabsheet becomes active
datagrid for search results
in the list user can check the rows and click a button on bottom of screen to export
user can also click on a hyperlink per row to see details
user can also click trashcan per row to delete.

I know I will have to make a several static pages to simulate this behaviour
eg before delete and after delete
but most important is the screen flow. To show from this page you can access following functionalities

As close as possible to the real thing. Then the need for documenting the GUI is not needed, only really the requirements, validations, behaviour on db. I don’t want to write comment “clicking this will bring you to diagram XYZ”

I hope I was able to clear out my requirements

If it could really generate HTML code then we would be able to use the export as a frame to code the real application in

If it is not supported now I would be nice to know if this might be a future enhancement.


Is there any news?

Can I upload some generated HTML by visio?
This is just clickable pictures but for presentations options this works good.
Of course this HTML is not reusable.

Kind regards


you can use microsoft visio to make GUI diagrams…

goto software option and select wireframe diagram


Please follow the article below on how to simulate the UI navigation by export publish your design into HTML using project publisher.


Best regards,
Rain Wong