The ORM Foundation

Get the facts!

Displaying ORM diagrams in a web app

Last post Mon, Apr 15 2013 14:45 by Matthew Curland. 6 replies.
Page 1 of 1 (7 items)
Sort Posts: Previous Next
  • Fri, Apr 12 2013 13:20

    • OrionB
    • Top 50 Contributor
    • Joined on Thu, Apr 3 2008
    • Tualatin OR
    • Posts 18

    Displaying ORM diagrams in a web app

    I'm about to create a web app using Visual Studio 2012 that will serve as documentation for another application used to manage an impressive amount of data. My idea is to show, for each and every control panel in the source application:
    • a picture of the pane (screenshot taken from the app)
    • a picture of the relevant part of the CDM (ORM notation)
    • a picture of the relevant part of the LDM (ER notation)
    • where appropriate some sample data as well.

    I have my .orm file in the same solution, and to bring the images over what I've been doing is rightclicking the background of the ORM diagram, selecting 'copy image', pasting into MS paint and saving that off as an image to display.

    This means that if I make any change to the ORM diagram, I then have to redo every image that the affected objects are in. (I am very thankful for the functionality that tells me every diagram a particular object is in!) But I do wonder, is there now a way or are there any plans to make this automatic? A way to reference a diagram from my web app and have it come up as a picture without my MS-paint intervention?

  • Fri, Apr 12 2013 16:41 In reply to

    Re: Displaying ORM diagrams in a web app

    Hello Orion,

    Have you seen the web-hosted .orm file viewers on You can all of the .orm diagrams in a file one at a time, or show all diagrams in one page (designed for printing). The views are all live off of an .orm file, and you can test with a local file if you like (in Chrome, FF, or IE10).

    If you look at the source for you'll see that it only takes a few lines to set up a div in another page to show the diagram. I can show cross-site model files (see instruction link from the home page), but haven't tried cross-siting the js files themselves. These files are updated regularly as the .orm files evolve (and browser world) evolves, so I wouldn't recommend taking snapshots.


  • Fri, Apr 12 2013 21:13 In reply to

    Re: Displaying ORM diagrams in a web app

    I did a little more investigating on using the underlying .js files from different sites, and they appear to work seamlessly. As you can see from the source for orm.aspx, this uses three .js files, which I would recommend you reference directly from my site so that they get updates (and, frankly, because ORM Solutions owns the copyright). So, to get an .orm viewer running on your site, you need to reference the three js files shown in orm.aspx using absolute URLS, as shown below.

    If you use the raphael rendering library for other things in your site then you obviously don't need my file. I'm currently using version 2.0.1.

      <style type="text/css">
       @media print {
       table#info {display:none}
      <script src="" type="text/javascript"></script>
      <script src="" type="text/javascript"></script>
      <script src="" type="text/javascript"></script>
      <script type="text/javascript">
       window.onload = function () {
         name: "view", // This is the name used to refer to this ORM pane. Use a different name for each viewer to view multiple panes
         infoTable: "info", // This matches table with id 'info' in the body
         fileName: "YOURFILE",
         paper: "diagramPaper" // This matches the div with id 'diagramPaper' in the body corresponds to diagramPaper div in the body
      <table id="info">
      <div id="diagramPaper"></div>

    Available fields for the object passed to the ormViewer.attach method (bolded name indicates a required field):

    • name: The name of the pane for attaching the orm viewer. Should be different for each call to attach, and a simple name (no spaces, etc.)
    • paper: The name of the div used to host the diagram. Corresponds to the id of a div element in the html
    • fileName: This comes in three forms.
      • An empty string means that a local file will be loaded (browser support required, Chrome, FF, IE10)
      • A relative path loads an .orm file relative to the current page (leave off the .orm, this is assumed)
      • A full URL (including the .orm) references an external URL, which must give permission as discussed in Note that you must specify 'infoTable' or 'fileInput' fields for this to work.
    • initialDiagram: The name or guid of the diagram to select when the file is loaded
    • userScale: A scaling value for the diagram itself. This is multiplied by the page zoom and the zoom dropdown, but allows you to adjust the diagram scale without zooming the page. 1.2 is the closest to default NORMA zoom and is the default.
    • infoTable: A table to hold information about the displayed diagram. This table contains the model and diagram names, zoom level, and diagram picker dropdown. If you set this, the following elements are all created automatically as part of the information table, but you can use your own controls by providing an id. Providing a null value for these elements hides them.
      • header: Provides status information during load and the model name afterwards.
      • nameDisplay: Shows the current diagram name and triggers the diagram name dropdown.
      • diagramLinks: The control holding the diagram names. Clicking these names activates the selected diagram.
      • zoomSelect: The dropdown used to pick the zoom states.
      • zoom: The zoom picture beside the zoomSelect button.
      • filterButton: The button used to open the diagramLinks list of diagrams.
      • filterText: The text box used to type in a diagram filter name (highlights matching diagram names in the diagramLinks control).
      • filterContainer: The container used to hold the diagramLinks and filterText elements.
      • fileInput: The name of a file input control. Used when fileName is "" to load a local file.
    • infoPrefix: If set, a name to append to the ids of automatic controls generated for infoTable. Use to display multiple infoTables on one page.
    • reduceSingleDiagram: Set to true to hide all diagram fields if the model contains exactly one diagram


    So, the bottom line is that you can easily display .orm diagrams in your own pages using minimal code and do not need to use heavy weight and static graphics. The entire viewing framework (raphael and my two files) totals less than 250k, which is likely smaller than the .png for a large diagram, plus you get live diagrams (right click to find a shape on another diagram, switch diagram pages, vector graphic 'no fuzz' scaling, etc). The diagrams are a little slow and rough on IE<9 because of the lack of SVG support, but I think most of us are using other browsers at this point. For svg-enabled browsers the diagram load and rendering is almost instant (much faster than NORMA).

    I use the .aspx part of the page to fill in the ormViewer fields, so there isn't much to it that you don't see in 'view source'. My general approach is to keep the viewer files unsecured and add security to the orm file directories, then use UrlAuthorizationModule.CheckUrlAccessForPrincipal on the requested file name when the viewer is called, with a Response.Redirect to a login page if the caller does not have permissions (watch out for ../ lead text, CheckUrlAccessForPrincipal requires ~/ instead). Obviously, this will be different for every site and web server, but it is only a couple of lines of code in aspx.

    The backing code for ormPrint.aspx (all diagrams on one page) is not yet nicely packaged like this, so I wouldn't recommend trying to integrate it locally at this point.

    This is actually part of a web-based editing framework designed for web-hosted editing and collaboration on model files, not just viewing. These more advanced features will run under a different business model, but the file viewers (including future extensions, like live browser verbalization) will remain freely available. I can currently do 'cheat' verbalization by dumping all of the verbalizations from a model file (with hyperlinks and styles tweaked to run with this framework) into a database, then ajax loading them as the selection changes. However, this is a large amount of raw data for both the db and wire, so is not a long-term solution and not something I'm sharing publicly at this point.

    Let us know if you're able to do this. You should be able to prototype in a few lines of code.


  • Sat, Apr 13 2013 13:59 In reply to

    • OrionB
    • Top 50 Contributor
    • Joined on Thu, Apr 3 2008
    • Tualatin OR
    • Posts 18

    Re: Displaying ORM diagrams in a web app

    Thanks! This is going to be fun to play with. I’ve gotten it to load and display my model when I leave fileName as “”, but I’ve yet to get it to load with a relative path. Attached (hopefully) is a screenshot named Untitled.gif from a very simplified sandbox – perhaps you can spot where I went amiss? (I've also tried adding the .orm to the filename and having it in the same location as the referenced-by-relative-path image)
  • Sat, Apr 13 2013 20:26 In reply to

    Re: Displaying ORM diagrams in a web app

    This should load MedicaidCDM.orm from the same directory on the server as the web page.

    If you look at the browser debugger ( at least in Chrome and FF) you should see the XHR request and any error returned. You should also be able to see a request in the server logs. The file must be accessible from the server. Try setting the MIME type for .orm files to text/xml and see if you get a better result. Can you access the file with the full URL? You won't need cross-site permissions to the same site.


  • Mon, Apr 15 2013 13:28 In reply to

    • OrionB
    • Top 50 Contributor
    • Joined on Thu, Apr 3 2008
    • Tualatin OR
    • Posts 18

    Re: Displaying ORM diagrams in a web app

    Setting the MIME type did the trick. I added this to my web.config file in my SimpleSandbox and it came up as expected.
  • Mon, Apr 15 2013 14:45 In reply to

    Re: Displaying ORM diagrams in a web app

    Hi Orion, 

    Good to hear you got it working. I had the MIME type instructions for viewing files from remote sites, but hadn't thought about it for files on the same site. My sites have had it set for a couple of years.

    BTW, I noticed earlier that your page title was changing and checked this in the code. The title is currently set by the ormViewer if you don't set the 'infoPrefix' field, the assumption being that if this is set then you're displaying multiple panes and no single pane should own the title. I'll tie this into a separate setting at some point. For now, just send an 'infoPrefix' property to ormViewer.attach with a non-empty string. This will leave the title alone and doesn't have any other side effects.


    PS My apologies if your other diagram types don't look as good:)

    PPS The other diagrams could also be drawn with the same system if you can produce XML and/or JSON representations of the other diagrams. The underlying models are declarative and fact-based (think of EntityType and FactType declarations mapped to a physical implementation). The XML load translates XSLT queries to declared elements. The Raphael drawing is done using rendering methods attached to the prototypes for the underlying data model. From what I've seen, the svg needed to render one diagram is about the size of a complete multi-diagram .orm file (5-15 diagrams, depending on diagram size), so you're actually moving much less data (not to mention saving server cycles by just serving files) by having a client-side model and rendering directly to that model. The technical details are beyond the scope of this forum, but you can ping me privately if you're interested in trying this.

Page 1 of 1 (7 items)
© 2008-2014 The ORM Foundation: A UK not-for-profit organisation -------------- Terms of Service