Skip to content
Mike Reams
← Work

PRJ · 2026

Blueprint Modeler: A Free CSDM Architecture Canvas

A free, browser-only canvas for modeling application architecture the CSDM way, with conformance hints from public sources.

CSDM rules in a PDF to A canvas that checks them

View project
The Blueprint Modeler editor: a palette of CSDM classes grouped by layer on the left, a canvas in the middle with a shared database platform laid out top to bottom from business applications through application services to hosts and network, and a Hints panel on the right listing three conformance hints, each with its white paper source.The Blueprint Modeler editor: a palette of CSDM classes grouped by layer on the left, a canvas in the middle with a shared database platform laid out top to bottom from business applications through application services to hosts and network, and a Hints panel on the right listing three conformance hints, each with its white paper source.

What it is

A free canvas for sketching application architecture with the Common Service Data Model: from business capability to business application, application service and the technology underneath. It offers only the relationships the model uses between two classes, flags common gaps as you draw, and exports a JSON file you can keep in Git or an SVG you can drop into a slide. There is no sign-up and no server. Models stay in your browser.

The problem

CSDM is how most ServiceNow shops structure their CMDB, but the rules live in a long white paper. People learning it, and architects sketching a design before anything exists in an instance, have nowhere to draw that knows the model. General diagramming tools will happily connect a business application straight to a server, which is exactly the shortcut CSDM exists to prevent.

What I built

  • A palette by layer. Thirteen CSDM classes in the white paper's layers, placed in lanes from business at the top to infrastructure at the bottom.
  • Allowed relationships only. Connect two elements and you choose from the types the model uses for that pair. A pair CSDM does not relate is refused with the reason.
  • Conformance hints. Eight checks, such as a business application with no capability, a service nobody can request, or a capability hierarchy deeper than six levels. Each hint advises rather than blocks, highlights the elements involved, and links to its source.
  • A class guide. Every class, relationship and hint on one page, with its source and how well the public text supports each relationship type.
  • Import, export and auto-layout. Model files round-trip exactly, images export in light or dark, and one click lays the model out by CSDM layer in a background worker.

Clean-room by design

Every rule comes from ServiceNow's public CSDM material, mainly the CSDM 5 white paper, and is written in my own words with a link back to the page it came from. Where the public text names a relationship type, it is marked as reported; where it only establishes the pairing, the type is marked as a conventional suggestion. The app never connects to an instance and contains nothing from any employer or customer.

How it is built

A static Next.js site on Vercel with React Flow for the canvas and elkjs for layout. There is no backend: storage is IndexedDB in the browser, and the only third-party request on the live site is a cookieless analytics beacon. Tests gate every deploy, including an accessibility pass in both themes on every page, a check that nothing loads from another origin, and layout checks across five screen widths.

Try it

Open it at model.mikereams.com and start from one of the three examples. The source is on GitHub under the MIT license.