1 Purpose #
EA 2.0 succeeds only when it can show its thinking.
These reference diagrams are not static blueprints — they’re semantic visuals designed to explain how live data, reasoning, and automation interact across layers.
Each can be exported as HTML / SVG and embedded directly in documentation, portals, or dashboards.
2 Core Diagram Set #
| Diagram | Focus | Purpose |
|---|---|---|
| Connectivity Map | Data & Integration Flows | Shows how CMDB, Cloud, GRC, and Apps feed the graph. |
| Component Rings | EA 2.0 Platform Layers | Visual stack from UI → RAG → Graph → Governance. |
| Outbound Loop | Action & Feedback | Depicts how insights create ServiceNow tasks and policy actions. |
| ETL Pipeline | Data Preparation | Illustrates staging, mapping, and loading process. |
3 Connectivity Map (Concept) #
[ServiceNow CMDB]──►[EA 2.0 ETL]──►[Graph DB]
│
[Azure Inventory]──►│ │──►[Reasoning API]
[Data Catalog (Purview)]──►│ │
▼
[Dashboards / NLQ UI / Power BI]
Use thin solid lines for data feeds and dotted arrows for control signals.
Each connector is color-coded (teal = ingest, purple = runtime, gold = governance).
4 Component Rings #
| Ring | Layer | Key Components |
|---|---|---|
| Outer | User Experience | NLQ UI, Teams Bot, Power BI Panels |
| Next | Reasoning & AI | RAG Service, Prompt Library, Guardrails |
| Next | Graph Core | Ontology, Lineage Store, DQ Metrics |
| Inner | Governance & Audit | OPA Rules, Ledger, Policy Store |
| Center | Data Sources | Cloud / GRC / Apps / Catalogs |
Visually represented as five concentric circles with labels and color gradients moving from red (center) → blue (outer).
5 Outbound Loop #
Trigger (Policy Breach)
↓
EA 2.0 Reasoning → Action Decision
↓
Outbound Connector → ServiceNow GRC Task
↓
Steward Fix → Closure Webhook
↓
EA 2.0 Graph Update → KPI Improves
Shows closed-loop architecture: automation + human validation + audit trail.
6 ETL Pipeline Diagram #
[Source Systems]
│
├─► Landing Zone (Blob / S3)
│
├─► Transformation (ADF / Functions)
│
├─► Mapping & Normalization
│
└─► Graph Loader (Cypher Upserts)
▼
[EA Graph DB → Reasoning Layer → Dashboards]
Each stage should be depicted as a rounded rectangle with color by function:
- Teal for Ingest
- Purple for Transform
- Blue for Graph Load
7 HTML / SVG Publishing Tips #
- Export from Figma / Draw.io as SVG, then embed inline in BetterDocs pages.
- Add light CSS animation (
stroke-dashoffset) to simulate flow. - Include a copyright footer (
© Hari Krishna – EA 2.0 Blueprint™). - Optimize SVG using SVGO to keep under 200 KB per diagram.
8 Diagram Interactions (For Live Sites) #
- Hover = tooltip with component description.
- Click = open linked BetterDocs article (e.g., click “Reasoning API” → RAG chapter).
- Use simple JS (
onmouseover,onclick) – no framework needed.
9 Governance Tagging #
Each diagram should display its data classification:
🔒 Internal Use Only
Version : v2.1
Updated : Nov 2025
This keeps visuals compliant and auditable under EA 2.0’s policy fabric.
10 Recommended Visual Color Key #
| Domain | Color |
|---|---|
| Ingest & Data Sources | #2dd4bf (teal) |
| Core Runtime / Graph | #7c5cff (purple) |
| Governance & Controls | #f59e0b (amber) |
| Outputs / Dashboards | #22c55e (green) |
Consistent palette reinforces brand and semantic meaning.
11 Benefits #
✅ Makes EA 2.0 intuitive for new teams.
✅ Supports executive communication through visual storytelling.
✅ Connects all concepts across playbook in a single visual language.
✅ Serves as source of truth for demo portals and client presentations.
12 Takeaway #
A diagram is not decoration — it is the grammar of understanding.
EA 2.0’s visual library turns architecture from documentation into conversation.
