Hi Reader, Fellow ServiceNow Enthusiast!
I was advised to share my article in the community as well, so it's easier to find later and can reach more like-minded professionals. Here's the link to the original article.
I'm a ServiceNow Architect. That means part of my job is to create diagrams. And I love diagrams! They help explain complex problems through visualization. Visual aids clarify relationships and structure information, making it easier for everyone to understand and remember complicated content. There’s a wealth of scientific research supporting this here, here, here and here.
So the evidence is clear. Using visualization and diagrams when trying to explain complex topics (an architecture is a complex topic) can be the difference between understanding all the risks and benefits or missing them entirely. This directly impacts the quality of decision-making.
That said, creating diagrams is time-consuming. It takes hours to come up with a solid visualization, research the most appropriate method (which I’ll talk about later), and then actually build it using the available tools.
But with the rise of AI tools, everything has changed. Let me show you how you can now create powerful diagrams using draw.io, Mermaid, and your preferred LLM (I’m using ChatGPT) with ArchiMate and UML as the modeling languages.
Important: Most of the diagrams I generate still require some modification to be more presentable and tailored to the specific situation I’m addressing. My method isn’t a finished product—it’s meant to spark ideas you may not have considered before.
Why these tools?
draw.io is a free diagramming tool available both online and offline. It is integrated into many widely used enterprise documentation platforms, such as Confluence.
mermaid: Allows diagram generation from markdown-style code. It has a native plugin built in drawio. <- this will be our crucial tool here as we can generate diagrams by using text, which is what LLM's are great at!
chatGPT: I use chatGPT for this exercise, because I found the results created by chatGPT reliable, however you can use mermaid's own AI of course.
ArchiMate:I chose ArchiMate because it is a widely recognized open standard developed by The Open Group, specifically designed for enterprise architecture modeling. It provides a comprehensive yet structured way to describe architectures across business, application, and technology layers.
UML: Lastly, I chose the Unified Modeling Language which is most probably older than some of my readers, because it is a widely adopted, standardized modeling language that is especially well-suited for software system design and specification. It provides a rich set of diagram types (e.g., class, sequence, use case, activity diagrams) that allow for modeling both structure and behavior in a detailed and precise way. Moreover, this is the modeling language most developers are familiar with.
Okay, but how do we start? This is the most manual step during the whole process
1) Get a paper and write down your process
In our scenario I'll walk you through a typical scenario of onboarding using ServiceNow HRSD. (The following situation is entirely fictional; any resemblance to reality is purely coincidental.)
- A person creates a new requirement candidate in SuccessFactors
- When the persons state automatically changes into hired trigger an interface towards ServiceNow to start Onboarding Process
- A ServiceNow case is opened with all the data inherited from SuccessFactors
- A document is created automatically using Adobe template within ServiceNow -the template is gotten via an interface from Adobe
- It is signed via Adobe Sign with a ServiceNow Adobe Sign Spoke
- Finally, the data is updated in SuccessFactor automatically via an interface from ServiceNow
2) Write your prompt
You can use mine here, it gives me pretty consistent results for ArchiMate
Can you help me model the following real-world process in ArchiMate using Mermaid syntax, with appropriate layering and color-coding?
The process is:
A person creates a new requirement candidate in SuccessFactors
When the persons state automatically changes into hired trigger an interface towards ServiceNow to start Onboarding Process
A ServiceNow case is opened with all the data inherited from SuccessFactors
A document is created automatically using Adobe template within ServiceNow -the template is gotten via an interface from Adobe
It is signed via Adobe Sign with a ServiceNow Adobe Sign Spoke
Finally, the data is updated in SuccessFactor automatically via an interface from ServiceNow
Please include:
Business roles (e.g., HR assistant, manager)
Business functions for manual steps
Application components and application functions
Proper ArchiMate-style color coding via Mermaid classDef styles
A full Mermaid code block I can paste into Mermaid Live Editor or a Mermaid-compatible tool."
The output will look something like this:
graph TB
%% ==== Business Layer ====
subgraph Business_Layer [Business Layer]
HR_Assistant[HR Assistant]
Manager[Manager]
Create_Requirement[Create Requirement Candidate]
Hire_Trigger[Candidate State Changes to Hired]
Sign_Document[Sign Employment Document]
end
%% ==== Application Layer ====
subgraph Application_Layer [Application Layer]
SF[SuccessFactors]
SF_Func_Create[Create Candidate]
SF_Func_Update[Update Candidate Record]
SN[ServiceNow]
SN_Func_StartCase[Start Onboarding Case]
SN_Func_CreateDoc[Generate Document - via Adobe Template]
SN_Func_Sign[Sign Document via Adobe Sign]
SN_Func_UpdateSF[Send Update to SuccessFactors]
Adobe[Adobe]
Adobe_Func_Template[Provide Template]
AdobeSign[Adobe Sign]
Adobe_Func_Signature[Signature Handling]
end
%% ==== Relationships (Flows & Triggers) ====
HR_Assistant --> Create_Requirement
Create_Requirement --> SF_Func_Create
SF_Func_Create --> SF
SF --> Hire_Trigger
Hire_Trigger --> SN_Func_StartCase
SN_Func_StartCase --> SN
SN_Func_StartCase --> SN_Func_CreateDoc
SN_Func_CreateDoc --> Adobe_Func_Template
Adobe_Func_Template --> Adobe
SN_Func_CreateDoc --> SN_Func_Sign
SN_Func_Sign --> Adobe_Func_Signature
Adobe_Func_Signature --> AdobeSign
SN_Func_Sign --> Sign_Document
SN_Func_Sign --> SN_Func_UpdateSF
SN_Func_UpdateSF --> SF_Func_Update
SF_Func_Update --> SF
%% ==== Class Definitions (Layer Coloring) ====
classDef BusinessLayer fill:#FDF6E3,stroke:#333,stroke-width:1px;
classDef ApplicationLayer fill:#E0F7FA,stroke:#036,stroke-width:1px;
%% ==== Apply Class Definitions ====
class HR_Assistant,Manager,Create_Requirement,Hire_Trigger,Sign_Document BusinessLayer;
class SF,SF_Func_Create,SF_Func_Update,SN,SN_Func_StartCase,SN_Func_CreateDoc,SN_Func_Sign,SN_Func_UpdateSF,Adobe,Adobe_Func_Template,AdobeSign,Adobe_Func_Signature ApplicationLayer;
3) Do visualization in draw.io with ArchiMate
First, I render the diagram in Mermaid. This step isn’t strictly necessary, but I want to highlight a key limitation of draw.io. (Technically, you can import Mermaid diagrams as SVGs, but this feature is limited in the free version.)
As you can see from the output, draw.io unfortunately misses a very important detail: the colors. Colors are crucial—they help distinguish between different elements, draw attention to key aspects, and in ArchiMate, they represent different layers.
So, you’ll need to manually color the Application Layer with #99FFFF (the standard ArchiMate 3.2 color) and the Business Layer with #FFFF99.
Still, this is far less effort than creating everything from scratch.
Also, keep in mind: sometimes AI-generated diagrams contain syntax errors. If that happens, just reitare the error with your chosen LLM, it usually corrects itself on the second try.
3.1) Do visualization in draw.io with UML
UML is quite similar. Let me show you three examples: a Component Diagram, a Sequence Diagram, and a Class Diagram.
Here’s the prompt I use. We're still working within the same domain integrating with SuccessFactors.
You are an expert ServiceNow integration architect.
Create three UML diagrams in Mermaid syntax for an integration between ServiceNow and SAP SuccessFactors that exchanges user data.
Context/Assumptions:
Direction & frequency: ServiceNow GETs users from SuccessFactors daily at {time}, and POSTs updated users back on demand (or after approval).
Auth: OAuth 2.0 (client credentials).
ServiceNow tables: sys_user (core) and u_sf_user_ext (custom extension).
Only minimal field transformations (e.g., date formats).
Error handling: log failures, retry on next run.
Deliverables (each in its own fenced code block):
Component diagram (flowchart) – show ServiceNow, SuccessFactors, and 2 REST interfaces (GET /users, POST /users/updates).
Sequence diagram – include: Scheduler trigger, OAuth token retrieval (note), GET flow (SuccessFactors → SN tables), POST flow (SN → SuccessFactors).
Class diagram – classes for SFUser, SNUser, SNUserExt with key attributes and mapping relationships.
Rules:
Use valid Mermaid syntax for each diagram type.
One diagram per code block; no mixed types in one block.
Keep names consistent across diagrams.
Add short notes where helpful.
Do not include anything except the diagrams and minimal explanatory comments.
Result codes:
Component Diagram:
flowchart TD
subgraph ServiceNow
SNCore[sys_user]
SNExt[u_sf_user_ext]
end
subgraph SuccessFactors
SFAPI1[GET /users]
SFAPI2[POST /users/updates]
end
Scheduler[[Daily Scheduler]]
Approval[[Manual Approval]]
Scheduler -->|Trigger Daily Job| SFAPI1
SFAPI1 -->|GET Users| ServiceNow
ServiceNow -->|Merge & Transform| SNCore
ServiceNow --> SNExt
Approval -->|On Demand| SFAPI2
SFAPI2 -->|POST Updated Users| SuccessFactors
SFAPI1 -.-> OAuthNote[(OAuth 2.0 Client Credentials Auth)]
SFAPI2 -.-> OAuthNote
Output:
Sequence Diagram:
sequenceDiagram
participant Scheduler
participant SN as ServiceNow
participant SF as SuccessFactors
participant OAuth as OAuth Provider
Scheduler->>SN: Trigger daily job
Note over SN,OAuth: Retrieve OAuth token via client credentials
SN->>OAuth: POST /token
OAuth-->>SN: Access token
SN->>SF: GET /users (with token)
SF-->>SN: User data
SN->>SN: Transform + Upsert to sys_user + u_sf_user_ext
alt On-demand or post-approval
SN->>OAuth: POST /token
OAuth-->>SN: Access token
SN->>SF: POST /users/updates (with token)
SF-->>SN: 200 OK or Error
SN->>SN: Log result
SN->>SN: Retry on next run if error
end
Output:
Class Diagram:
classDiagram
class SFUser {
+string userId
+string firstName
+string lastName
+string email
+date hireDate
}
class SNUser {
+string sys_id
+string name
+string email
+date start_date
}
class SNUserExt {
+string user_ref --> references SNUser.sys_id
+string sf_user_id
+string source_system
}
SFUser --> SNUser : mapped via rules
SNUser --> SNUserExt : 1-to-1 link by user_ref
note for SFUser "Source structure from SuccessFactors"
note for SNUser "Core ServiceNow user table"
note for SNUserExt "Custom extension for SF-specific data"
Output:
Conclusion
Diagrams are more than just pretty pictures—they’re essential tools for communicating complex architecture in a clear, structured, and memorable way. While creating high-quality visualizations used to be time-consuming and manual, the combination of AI-powered tools like ChatGPT, draw.io, and Mermaid has dramatically changed the game.
By leveraging modeling standards like ArchiMate and UML, and combining them with natural language prompts, you can now generate meaningful, structured diagrams with minimal effort. These diagrams won’t be perfect out of the box—but they provide a powerful starting point that can save hours of work and spark new ways of thinking about a problem.
Whether you're building enterprise architecture visuals or documenting service integrations, this method can boost your productivity, improve clarity, and ultimately help your stakeholders make better decisions.
So grab your paper, draft your process, and let your favorite LLM do the heavy lifting. Your future self (and your architecture review board) will thank you.
Happy diagramming! — A Fellow ServiceNow Architect
