# Process modeling essentials

Jim Wilson • AgGateway CTO
ISO/TC 347 Plenary
Cologne, Germany
2026-03-11

---
# Session objectives

By the end of this session you will know enough process modeling concepts, tools, and techniques to use process modeling in your organization and teach the essentials to others.

Of course, you will just be getting started, but getting started is the biggest hurdle with process modeling.

---
# Agenda

* Computer setup
* First process model
* Diagram → presentation tool
* Why process modeling is important
* Why standard process models are important
* Process model types
* Process modeling tools

---
# First things first

* The content I present and this session's recording will be available by lunch today.
* The content is ready now, but I don't want to share it yet lest some of you lose focus!
* There will be times where you follow along on your computer and times where you to listen. I will clearly transition from one to the other.
* Technical precision is a lower priority than beginner-friendly conversation. (Experts can mock me over texts.)

---
# Computer setup

* Open a browser and navigate to https://tinyurl.com/tc347   
* Open your preferred presentation tool (e.g., PowerPoint, Google Slides)
* Open VS Code (if you have it installed already)
* https://tinyurl.com/tc347` → *redirects to* → https://aggateway.atlassian.net/wiki/x/XoCPTQE

---
# First process model
* Getting started
	* `New UML` → `Sequence`
	* Delete everything between `@startuml` and `@eduml` (⌘⮐)
	* Everything goes between `@startuml` and `@enduml`
	* `Buyer -> Seller: order` (⌘⮐ throughout)
	* `Seller -> Buyer: order response`
* Aliases, arrow directions, and alignment
	* Just below `@startuml` add the following two lines.
	* `participant Buyer as b`
	* `participant Seller as s`
	* `Buyer -> Seller` → `b -> s`
	* `Seller -> Buyer` → `s -> b`
	* `s -> b` → `b <- s`
	* Align `as` in the participant lines
	* Add the following lines:
	* `b <- s: advanced ship notice`
	* `b <- s: invoice`
	* `b <- b: initiate payment`
	* `b -> s: remittance advice`
* Title and message numbers
	* Just below `@startuml` add the following two lines.
	* `autonumber`
	* `title Order-to-Cash Process`
* Miscellanea
	* Show Forwarding process and call out the following
	* "As" alignmentDiagram → presentation tool
	* Quotes around participant names
	* Colon alignment
	* Internal messages / actions
	* Arrow types
	* Show [ADAPT Standard docs](https://adaptstandard.org)
	* Show [connectSpec docs](https://www.oagidocs.org/docs/scenarios/)
	* Go to `Quality` → `Scenario 68` and click on the link
	* Notes
	* Links
	* Click on `8 GetTestResults`
	* Drill down to Test Results Line
	* A look ahead: Show class model
* Wrap up
	* Add the following line after the order response
	* `s -> s: ship product`

---
# Diagram in browser → file → presentation tool
* Diagram → SVG image file
	* Click on `SVG` radio button
	* Expand the left sidebar - > symbol in the top-left corner of browser window
	* Click the little symbol in the bottom-right corner of thumbnail (box with arrow going up and right). This opens the diagram in a new browser tab (for Jim in Chrome on Mac, which may be relevant for the next step as well).
	* `File` → `Save Page As...`
	* Specify friendly filename and save. Note that the generated filename is very long.
* Diagram → PNG image file
	* Same process as SVG (except `PNG` radio button)
* Image file → presentation tool
	* Microsoft PowerPoint
		* Lossless scaling
	* Apple Keynote
		* Lossless scaling
	* Google Slides
		* SVG doesn't work, use PNG
		* Scaling limits
* SVG vs PNG file formats
	* SVG is scalar. PNG is raster.
	* Note scaling in PlantUML scripted web page for SVG but not PNG.

---
# Process modeling importance

* Create value
	* Do things better
	* Do new things
* How do we do new things? Execute a new process!
* How do we do things better? Improve a process!
	* As-is
	* To-be
* What happens and where data flows to support what happens

---
# Standard process models

* Random shapes and colors are great for children's cereal, not process diagrams
* Intuitive diagrams are not so intuitive when it comes to process diagrams (i.e., not-so-common common sense)

---
# Process model types

* UML (Unified Modeling Language)
	* Sequence
	* Activity
	* State (process model-adjacent)
* BPMN (Business Process Model and Notation)

---
# Process modeling tools

* Microsoft Visual Studio Code (i.e., VS Code)
  * Show plantuml files
* PlantUML jar file (Java application run from the command line)
  * Command line: `java -jar plantuml.jar ./plantuml/*.* -o ../images -x ./plantuml/*style.* -tsvg`
  * Delete the images.
  * Generate PNG files.
  * Note extra file for map.
  * Claud code example prompt: `I have several plantuml scripts in the plantuml directory. Create svg files from them and put them in the images directory.`
* Mermaid.js (native support in GitHub)
* Trisotech Digital Enterprise Suite (for BPMN)
* Many others (Jim is happy to share)

---
# Now, do things better!
# Do new things!