Custom Diagram Creator
Dynatrace AppEngine app · open source

Architecture diagrams that show what's broken, live.

Custom Diagram Creator lets you draw your architecture by hand and lights it up with live status from Grail: Davis problems, SLO evaluations and DQL KPIs, all on one canvas.

Get started View on GitHub

Built by Jose Eduardo Romero Jimenez

Last 2 hoursAuto-refresh: 1 mSample – EasyTrade trading platform
Example diagram A frontend calls two services that use a set of databases. One database is failing, so its container turns orange and the KPI connection from the payments service is red, while the other connection is green. Web Banking Frontend · 2 entities 0 ✓ Accounts API Service · 3 entities p95184 ms errors0.2 % Payments API Service · 1 problem 1 ! Databases orders-db ledger-db cache-redis 1 of 3 failing 184 ms 1.24 s

Everything a status diagram needs

Dashboards answer "how much"; diagrams answer "where". Custom Diagram Creator puts your own picture of the system on top of the data Dynatrace already has.

Draw it by hand

Drag components onto a canvas, connect them from any side and arrange them yourself — or auto-arrange left to right.

Live status from problems

49 entity types — apps, endpoints, synthetic monitors, hosts, Kubernetes, databases and cloud services. Pick the real entities from a searchable list; the component turns green, orange or red from the Davis problems open in the timeframe.

Containers for entities and SLOs

One row per entity or per SLO, each with its own status. The container sums them up: all red, some red, all green.

KPIs on the wires

Ready-made KPIs for every main component type — request count, response time, failure rate, availability — one line per entity you pick. KPI connections show a value against a threshold with animated flow.

Edit like a dashboard

Floating toolbar on the selected element, resize grips in the corners and an editor docked to the right that applies changes live.

Stored in Grail

Diagrams are JSON documents in a Grail lookup table. List, duplicate, upload, download and delete them like dashboards.

Four colors, one rule each

Every element is evaluated against the page timeframe. Color is never the only signal: each status also has an icon and a tooltip.

✓ Pass

No problems open in the timeframe, all children green, or the KPI is within its threshold.

! Warning

Problems reached the warning count, some children are red or orange, or the KPI crossed its warning value.

✕ Failing

Problems reached the failing count, every child is red, or the KPI crossed its failing value.

? No data

The query failed or returned nothing. Hover the icon or open the details to see why.

Up and running in three steps

You need Node.js and a Dynatrace environment where you can install apps.

Clone and install

Get the code and its dependencies.

bash
git clone https://github.com/Edunzz/dynatrace_apps_custom_diagram_creator.git
cd dynatrace_apps_custom_diagram_creator
npm install

Point it to your environment

Set environmentUrl in app.config.json.

json
"environmentUrl": "https://<your-environment-id>.apps.dynatrace.com/"

Deploy and open it

The first open creates the storage with the EasyTrade sample diagram.

bash
npm run deploy

Let an AI agent draw it for you

The repository ships a skill for agents that use dtctl: it discovers real entities, writes a diagram that matches the JSON Schema, validates every query and registers the result in the same lookup the app reads.

Read about the agent skill

bash
dtctl query 'smartscapeNodes "SERVICE"
  | filter contains(name, "payment", caseSensitive: false)
  | fields id, name'