Learn to report on UML models through pictures

By Colin Coates

Version 11 of Sparx Enterprise Architect included significantly enhanced reporting facilities. This was worthy of some celebration, and so I contributed an article to the Sparx Community that illustrated the improvements through a couple of UML diagrams. This was quite well received, and resulted in me being featured in a Community Author Spotlight on sparxsystems.com (thanks, Scott)!

Subsequently, Sparx ran a fresh Webinar on the basics of reporting, with more advanced topics to follow.

Emboldened by all this action around reporting on models using the functionality that’s already built into Sparx Enterprise Architect, I decided to apply immersive language learning techniques in both the refresh of our classroom based training materials, along with a brand new e-learning course (email us for details via info@dthomas.co.uk).

So the idea is to enable learning how to use Sparx Enterprise Architect through (UML) pictures. So what does that look like? Here is a taster, around the “Publish as HTML” functionality of Sparx Enterprise Architect.

learn through pics

Overview of reporting

Sparx Enterprise Architect provides two built-in reporting mechanisms:

  • Generate Documentation
  • HTML Report


About Generate Documentation

Generate Documentation is used to publish complete and fully formatted documents in a variety of file formats, that are also suitable for printing in hardcopy. The use of report templates enables a fine degree of control over presentation of contents. Report contents can be selected, searched for and filtered. Sub-templates can be used to include contents based on advanced selections, SQL queries and/or scripted functions.

about doc gen

About Generate HTML Report

HTML Reports are used to publish models as a collection of HTML pages and images, automatically structured into a hierarchy of directories. HTML reports can be shared on a Web server, or conveniently zipped into an archive for distribution via email. HTML reports offer relatively limited support for customizing the report content and presentation when compared with the functionality for Generate Documentation.

about html

Publish as  HTML process

  1. You can right-click a package in the project browser, or right-click a Master Document element on a Documentation diagram, to begin publishing a HTML report.
  2. Click Documentation | HTML report.
  3. The Publish as HTML dialog window is displayed.

html process

About the Publish as HTML dialog

The Publish as HTML window is relatively simple to navigate, assuming a top to bottom and left to right workflow. Let’s get started with a scenario for publishing a basic HTML report.

html dialog

Generate a HTML report

  1. The Publish as HTML window is displayed.
  2. Use the keyboard to type something like C:\Users\ccoates\Documents\MyReport into the Output to edit field.
  3. Click Generate.
  4. Click View.

html sequence diagram

Example HTML report

Your first report features the content of your model, formatted according to the default HTML template selections. This includes the Sparx Enterprise Architect logo branding. You can now continue to create a custom HTML template that will replace the default logo with customized company branding.

example html

Select your header image and re-publish

  1. Use your keyboard to type something like C:\Users\ccoates\Pictures\example.jpg into the Header Image edit field (alternatively, you could click the ellipsis button and browse for an image file).
  2. Click Generate.

header sequence

Problem: mismatched image and frame heights

You will see that the Dunstan Thomas logo is too large to fit within the available frame. You could just resize the logo image, but that might contravene the rules set by your companies marketing and branding departments. As a better alternative, you will now resize the frame to fit around the selected logo image.


Create HTML template

  1. Click to expand the Document Generation | Web Style Templates
  2. Right-click Web Style Templates; a menu is displayed.
  3. Click Create HTML Template.
  4. Use the keyboard to type MyReport into the Enter Value edit field.
  5. Click OK.


Change height of .IndexBody

  1. The HTML and CSS Style Editor window is displayed.
  2. Click the CSS – Main item in the list of Templates.
  3. Press Control-F on your keyboard to start a text search, and then type “.IndexBody” and the enter key. If you need more help, please see below for the detailed section on “Find and replace”.
  4. Use the keyboard to replace top: 61px with something like top: 91px (actually, the new image height + 1).
  5. Continue onto Change height of .IndexHeader.

change index body

Change height of .IndexHeader

  1. Click inside the Current Modified Template edit field.
  2. Press the Control and F keys on your keyboard (the standard Windows keyboard shortcut to start a search).
  3. Search for the text .indexHeader; refer to the section below about Find and replace, if you need more help.
  4. Change height: 60px to match the height of your selected image, like in the example sequence diagram below.
  5. Click Save.
  6. Click Close.

change index header

Find and replace

  1. The Find and Replace window is displayed.
  2. Use the keyboard to type .indexHeader into the Find what edit box.
  3. Click (to set) the Match whole word check-box.
  4. Click the Find Next

find and replace

Re-publish and check image

  1. Use right-click to open the Publish as HTML
  2. Click Generate.
  3. Click View.


The finished HTML report

The framing of the HTML page has been resized to fit the company logo. This concludes the basic introduction to how to create custom HTML report templates.

finished report

Previous Next