csdmflow
Diagrams as code for ServiceNow CSDM

Service models, drawn from text.

Write down your applications, instances, offerings and services. Say how they relate. csdmflow places every box, labels every line and colours every domain, the CSDM way.

Open the editor ↓ Read the docs
Typed as text, laid out by csdmflow
The one-minute tour

Stop pushing boxes around in slide decks.

Every change to a hand-drawn service model means re-placing boxes and re-routing lines. With csdmflow you edit two lines of text and the diagram redraws itself.

  • BeforePowerPoint, Visio or draw.io: hours per diagram, and again at every change.
  • AfterType the model, get it laid out the CSDM way.
  • ExportReal, editable shapes in PowerPoint and draw.io, lines glued to boxes.

The editor

Type a model and the drawing follows. Start from any of the examples, including every transcribed reference slide.

Title—
Layout—
Boxes—
Size—
Status—

One model, four outputs

Every format comes from the same layout, so a box sits in the same place whether you paste it into a deck or a wiki.

.svg

SVG

Crisp at any size. Drops into docs, wikis and Confluence pages.

.png

PNG

A 2× picture for chat, email and anywhere vectors aren't welcome.

.pptx

PowerPoint

Real shapes, not a picture: each box holds its own text, every line keeps its arrow and dash.

.drawio

draw.io

Download a file, or copy and paste shapes onto a canvas. Lines stay glued when you move a box.

The whole language on one sheet

Entities are TYPE id: Name; relationships are a -> b. csdmflow picks the label, the line style and the colour from the two types.

Entity types

  • BCBusiness Capability
  • BABusiness Application
  • SIService Instance
  • TMSOTech Mgmt Service Offering
  • TMSTech Mgmt Service
  • DCGDynamic CI Group
  • CI(…)Any CI, e.g. CI(Database)
  • BSOBusiness Service Offering
  • BSBusiness Service
  • SPService Portfolio

Relationships, inferred

  • BA → SIConsumes
  • BSO → SIDepends On
  • TMSO → SIContains
  • BSO → BSReferences
  • SI → CIService mapping, down the chain
  • a -> b : Sends data toData flow
layout cross | tiers | row | lanes   # one setting, four shapes
SI ea: *EA Prod [Dev, QA]           # variants: back cards
CI(Windows Server) win: web01, web02 # several instances
theme light                          # or dark (default)

Embed it like mermaid

One script tag, and every <pre class="csdmflow"> on the page becomes a diagram.

<pre class="csdmflow">
  BA crm: Customer Portal
  SI crm-prod: Customer Portal Prod
  BSO self-service: Self Service

  crm -> crm-prod
  self-service -> crm-prod
</pre>

<script src="https://cdn.jsdelivr.net/npm/csdmflow@0.2/dist/csdmflow.min.js"></script>
  BA crm: Customer Portal
  SI crm-prod: Customer Portal Prod
  BSO self-service: Self Service

  crm -> crm-prod
  self-service -> crm-prod
  • Indentation inside the block is ignored
  • Errors show under the block; the page keeps rendering
  • csdmflow.run() renders blocks added later