Sequence Diagram Design
Previously, we have designed the user journey, which sees things from the perspective of the end user. Now, we will approach from the other perspective, and design the workflow from the system’s point of view. We will use Sequence Diagrams for this purpose.
We will try to follow closely the order of the user journey from the previous exercises, so that it’s easier to compare and see how a user journey translates into system processes. Remember that we’ve also identified the system components of this app, so we will use the component name and functions in our sequence diagrams here.
Tag-based Time Tracking
Start Work Log
%%{
init: {
'theme': 'base',
'themeVariables': {
"primaryColor": "#f4e3d7",
"primaryTextColor": "#502d16",
"primaryBorderColor": "#784421",
"lineColor": "#784421",
"secondaryColor": "#a05a2c",
"tertiaryColor": "#c87137"
}
}
}%%
sequenceDiagram
participant User
participant System
participant WorkLog
participant Tag
User->>+System: Request Work Logs Page
System->>+WorkLog: list()
WorkLog-->>-System: WorkLogs
System-->>-User: Render Work Logs Page
Note right of User: Wait for user action
User->>+System: Start Work
System->>+Tag: list()
Tag-->>-System: Tags
System-->>-User: Render Work Log Form
Note right of User: Wait for user action
alt confirm
User->>+System: Input and Confirm
opt tags present
loop each tag
System->>+Tag: createIfNotExists()
Tag-->>-System: Tag[id=n]
end
end
System->>+WorkLog: create()
WorkLog-->>-System: WorkLog[id=1]
System-->>-User: Render Work Log Page
else cancel
User->>+System: Cancel
System->>+WorkLog: list()
WorkLog-->>-System: WorkLogs
System-->>-User: Render Work Logs Page
end
Start Work Log sequence.
End Work Log
%%{
init: {
'theme': 'base',
'themeVariables': {
"primaryColor": "#f4e3d7",
"primaryTextColor": "#502d16",
"primaryBorderColor": "#784421",
"lineColor": "#784421",
"secondaryColor": "#a05a2c",
"tertiaryColor": "#c87137"
}
}
}%%
sequenceDiagram
participant User
participant System
participant WorkLog
participant Tag
User->>+System: Request Work Logs Page
System->>+WorkLog: list()
WorkLog-->>-System: WorkLogs
System-->>-User: Render Work Logs Page
Note right of User: Wait for user action
User->>+System: End WorkLog[id=1]
System->>+WorkLog: view(id=1)
WorkLog-->>-System: WorkLog[id=1]
System->>+Tag: list()
Tag-->>-System: Tags
System-->>-User: Render Work Log Form
Note right of User: Wait for user action
alt confirm
User->>+System: Input and Confirm
opt tags present
loop each tag
System->>+Tag: createIfNotExists()
Tag-->>-System: Tag[id=n]
end
end
System->>+WorkLog: edit(id=1)
WorkLog-->>-System: WorkLog[id=1]
System-->>-User: Render Work Log Page
else cancel
User->>+System: Cancel
System->>+WorkLog: list()
WorkLog-->>-System: WorkLogs
System-->>-User: Render Work Logs Page
end
End Work Log sequence.
Edit Work Log
%%{
init: {
'theme': 'base',
'themeVariables': {
"primaryColor": "#f4e3d7",
"primaryTextColor": "#502d16",
"primaryBorderColor": "#784421",
"lineColor": "#784421",
"secondaryColor": "#a05a2c",
"tertiaryColor": "#c87137"
}
}
}%%
sequenceDiagram
participant User
participant System
participant WorkLog
participant Tag
User->>+System: Request Work Logs Page
System->>+WorkLog: list()
WorkLog-->>-System: WorkLogs
System-->>-User: Render Work Logs Page
Note right of User: Wait for user action
User->>+System: Edit WorkLog[id=1]
System->>+WorkLog: view(id=1)
WorkLog-->>-System: WorkLog[id=1]
System->>+Tag: list()
Tag-->>-System: Tags
System-->>-User: Render Work Log Form
Note right of User: Wait for user action
alt confirm
User->>+System: Input and Confirm
opt tags present
loop each tag
System->>+Tag: createIfNotExists()
Tag-->>-System: Tag[id=n]
end
end
System->>+WorkLog: edit(id=1)
WorkLog-->>-System: WorkLog[id=1]
System-->>-User: Render Work Log Page
else cancel
User->>+System: Cancel
System->>+WorkLog: list()
WorkLog-->>-System: WorkLogs
System-->>-User: Render Work Logs Page
end
Edit Work Log sequence.
Delete Work Log
%%{
init: {
'theme': 'base',
'themeVariables': {
"primaryColor": "#f4e3d7",
"primaryTextColor": "#502d16",
"primaryBorderColor": "#784421",
"lineColor": "#784421",
"secondaryColor": "#a05a2c",
"tertiaryColor": "#c87137"
}
}
}%%
sequenceDiagram
participant User
participant System
participant WorkLog
User->>+System: Request Work Logs Page
System->>+WorkLog: list()
WorkLog-->>-System: WorkLogs
System-->>-User: Render Work Logs Page
Note right of User: Wait for user action
alt work log in used
User->>+System: Delete WorkLog[id=1]
System->>+WorkLog: isUsed(id=1)
WorkLog-->>-System: true
System-->>-User: Abort and Display Error
else work log not in used
User->>+System: Delete WorkLog[id=1]
System->>+WorkLog: isUsed(id=1)
WorkLog-->>-System: false
System->>+WorkLog: view(id=1)
WorkLog-->>-System: WorkLog[id=1]
System-->>-User: Render Work Log Form
Note right of User: Wait for user action
alt confirm delete
User->>+System: Confirm
System->>+WorkLog: delete(id=1)
WorkLog-->>-System: success
System->>+WorkLog: list()
WorkLog-->>-System: WorkLogs
System-->>-User: Render Work Logs Page
else cancel delete
User->>+System: Cancel
System->>+WorkLog: list()
WorkLog-->>-System: WorkLogs
System-->>-User: Render Work Logs Page
end
end
Delete Work Log sequence.
Manage Tags
Create Tag
%%{
init: {
'theme': 'base',
'themeVariables': {
"primaryColor": "#f4e3d7",
"primaryTextColor": "#502d16",
"primaryBorderColor": "#784421",
"lineColor": "#784421",
"secondaryColor": "#a05a2c",
"tertiaryColor": "#c87137"
}
}
}%%
sequenceDiagram
participant User
participant System
participant Tag
User->>+System: Request Tags Page
System->>+Tag: list()
Tag-->>-System: Tags
System-->>-User: Render Tags Page
Note right of User: Wait for user action
User->>+System: New Tag
System-->>-User: Render Tag Form
Note right of User: Wait for user action
alt confirm create
alt tag does not exist
User->>+System: Input and Confirm
System->>+Tag: create()
Tag-->>-System: Tag[id=1]
System-->>-User: Render Tag Page
else tag already exists
User->>+System: Input and Confirm
System->>+Tag: create()
Tag-->>-System: error
System-->>-User: Display Error
end
else cancel create
User->>+System: Cancel
System->>+Tag: list()
Tag-->>-System: Tags
System-->>-User: Render Tags Page
end
Create Tag sequence.
Edit Tag
%%{
init: {
'theme': 'base',
'themeVariables': {
"primaryColor": "#f4e3d7",
"primaryTextColor": "#502d16",
"primaryBorderColor": "#784421",
"lineColor": "#784421",
"secondaryColor": "#a05a2c",
"tertiaryColor": "#c87137"
}
}
}%%
sequenceDiagram
participant User
participant System
participant Tag
User->>+System: Request Tags Page
System->>+Tag: list()
Tag-->>-System: Tags
System-->>-User: Render Tags Page
Note right of User: Wait for user action
User->>+System: Edit Tag[id=1]
System->>+Tag: view(id=1)
Tag-->>-System: Tag[id=1]
System-->>-User: Render Tag Form
Note right of User: Wait for user action
alt confirm
User->>+System: Input and Confirm
System->>+Tag: edit(id=1)
Tag-->>-System: Tag[id=1]
System-->>-User: Render Tag Page
else cancel
User->>+System: Cancel
System->>+Tag: list()
Tag-->>-System: Tags
System-->>-User: Render Tags Page
end
Edit Tag sequence.
Delete Tag
%%{
init: {
'theme': 'base',
'themeVariables': {
"primaryColor": "#f4e3d7",
"primaryTextColor": "#502d16",
"primaryBorderColor": "#784421",
"lineColor": "#784421",
"secondaryColor": "#a05a2c",
"tertiaryColor": "#c87137"
}
}
}%%
sequenceDiagram
participant User
participant System
participant Tag
User->>+System: Request Tags Page
System->>+Tag: list()
Tag-->>-System: Tags
System-->>-User: Render Tags Page
Note right of User: Wait for user action
alt tag in used
User->>+System: Delete Tag[id=1]
System->>+Tag: isUsed(id=1)
Tag-->>-System: true
System-->>-User: Abort and Display Error
else tag not in used
User->>+System: Delete Tag[id=1]
System->>+Tag: isUsed(id=1)
Tag-->>-System: false
System->>+Tag: view(id=1)
Tag-->>-System: Tag[id=1]
System-->>-User: Render Tag Form
Note right of User: Wait for user action
alt confirm delete
User->>+System: Confirm
System->>+Tag: delete(id=1)
Tag-->>-System: success
System->>+Tag: list()
Tag-->>-System: Tags
System-->>-User: Render Tags Page
else cancel delete
User->>+System: Cancel
System->>+Tag: list()
Tag-->>-System: Tags
System-->>-User: Render Tags Page
end
end
Delete Tag sequence.
Manage Contacts
Create Contact
%%{
init: {
'theme': 'base',
'themeVariables': {
"primaryColor": "#f4e3d7",
"primaryTextColor": "#502d16",
"primaryBorderColor": "#784421",
"lineColor": "#784421",
"secondaryColor": "#a05a2c",
"tertiaryColor": "#c87137"
}
}
}%%
sequenceDiagram
participant User
participant System
participant Contact
User->>+System: Request Contacts Page
System->>+Contact: list()
Contact-->>-System: Contacts
System-->>-User: Render Contacts Page
Note right of User: Wait for user action
User->>+System: New Contact
System-->>-User: Render Contact Form
Note right of User: Wait for user action
alt confirm
User->>+System: Input and Confirm
System->>+Contact: create()
Contact-->>-System: Contact[id=1]
System-->>-User: Render Contact Page
else cancel
User->>+System: Cancel
System->>+Contact: list()
Contact-->>-System: Contacts
System-->>-User: Render Contacts Page
end
Create Contact sequence.
Edit Contact
%%{
init: {
'theme': 'base',
'themeVariables': {
"primaryColor": "#f4e3d7",
"primaryTextColor": "#502d16",
"primaryBorderColor": "#784421",
"lineColor": "#784421",
"secondaryColor": "#a05a2c",
"tertiaryColor": "#c87137"
}
}
}%%
sequenceDiagram
participant User
participant System
participant Contact
User->>+System: Request Contacts Page
System->>+Contact: list()
Contact-->>-System: Contacts
System-->>-User: Render Contacts Page
Note right of User: Wait for user action
User->>+System: Edit Contact[id=1]
System->>+Contact: view(id=1)
Contact-->>-System: Contact[id=1]
System-->>-User: Render Contact Form
Note right of User: Wait for user action
alt confirm
User->>+System: Input and Confirm
System->>+Contact: edit(id=1)
Contact-->>-System: Contact[id=1]
System-->>-User: Render Contact Page
else cancel
User->>+System: Cancel
System->>+Contact: list()
Contact-->>-System: Contacts
System-->>-User: Render Contacts Page
end
Edit Contact sequence.
Delete Contact
%%{
init: {
'theme': 'base',
'themeVariables': {
"primaryColor": "#f4e3d7",
"primaryTextColor": "#502d16",
"primaryBorderColor": "#784421",
"lineColor": "#784421",
"secondaryColor": "#a05a2c",
"tertiaryColor": "#c87137"
}
}
}%%
sequenceDiagram
participant User
participant System
participant Contact
User->>+System: Request Contacts Page
System->>+Contact: list()
Contact-->>-System: Contacts
System-->>-User: Render Contacts Page
Note right of User: Wait for user action
alt contact in used
User->>+System: Delete Contact[id=1]
System->>+Contact: isUsed(id=1)
Contact-->>-System: true
System-->>-User: Abort and Display Error
else contact not in used
User->>+System: Delete Contact[id=1]
System->>+Contact: isUsed(id=1)
Contact-->>-System: false
System->>+Contact: view(id=1)
Contact-->>-System: Contact[id=1]
System-->>-User: Render Contact Form
Note right of User: Wait for user action
alt confirm delete
User->>+System: Confirm
System->>+Contact: delete(id=1)
Contact-->>-System: success
System->>+Contact: list()
Contact-->>-System: Contacts
System-->>-User: Render Contacts Page
else cancel delete
User->>+System: Cancel
System->>+Contact: list()
Contact-->>-System: Contacts
System-->>-User: Render Contacts Page
end
end
Delete Contact sequence.
Manage Currencies
Create Currency
%%{
init: {
'theme': 'base',
'themeVariables': {
"primaryColor": "#f4e3d7",
"primaryTextColor": "#502d16",
"primaryBorderColor": "#784421",
"lineColor": "#784421",
"secondaryColor": "#a05a2c",
"tertiaryColor": "#c87137"
}
}
}%%
sequenceDiagram
participant User
participant System
participant Currency
User->>+System: Request Currencies Page
System->>+Currency: list()
Currency-->>-System: Currencies
System-->>-User: Render Currencies Page
Note right of User: Wait for user action
User->>+System: New Currency
System-->>-User: Render Currency Form
Note right of User: Wait for user action
alt confirm
User->>+System: Input and Confirm
System->>+Currency: create()
Currency-->>-System: Currency[id=1]
System-->>-User: Render Currency Page
else cancel
User->>+System: Cancel
System->>+Currency: list()
Currency-->>-System: Currencies
System-->>-User: Render Currencies Page
end
Create Currency sequence.
Edit Currency
%%{
init: {
'theme': 'base',
'themeVariables': {
"primaryColor": "#f4e3d7",
"primaryTextColor": "#502d16",
"primaryBorderColor": "#784421",
"lineColor": "#784421",
"secondaryColor": "#a05a2c",
"tertiaryColor": "#c87137"
}
}
}%%
sequenceDiagram
participant User
participant System
participant Currency
User->>+System: Request Currencies Page
System->>+Currency: list()
Currency-->>-System: Currencies
System-->>-User: Render Currencies Page
Note right of User: Wait for user action
User->>+System: Edit Currency[id=1]
System->>+Currency: view(id=1)
Currency-->>-System: Currency[id=1]
System-->>-User: Render Currency Form
Note right of User: Wait for user action
alt confirm
User->>+System: Input and Confirm
System->>+Currency: edit(id=1)
Currency-->>-System: Currency[id=1]
System-->>-User: Render Currency Page
else cancel
User->>+System: Cancel
System->>+Currency: list()
Currency-->>-System: Currencies
System-->>-User: Render Currencies Page
end
Edit Currency sequence.
Delete Currency
%%{
init: {
'theme': 'base',
'themeVariables': {
"primaryColor": "#f4e3d7",
"primaryTextColor": "#502d16",
"primaryBorderColor": "#784421",
"lineColor": "#784421",
"secondaryColor": "#a05a2c",
"tertiaryColor": "#c87137"
}
}
}%%
sequenceDiagram
participant User
participant System
participant Currency
User->>+System: Request Currencies Page
System->>+Currency: list()
Currency-->>-System: Currencies
System-->>-User: Render Currencies Page
Note right of User: Wait for user action
alt currency in used
User->>+System: Delete Currency[id=1]
System->>+Currency: isUsed(id=1)
Currency-->>-System: true
System-->>-User: Abort and Display Error
else currency not in used
User->>+System: Delete Currency[id=1]
System->>+Currency: isUsed(id=1)
Currency-->>-System: false
System->>+Currency: view(id=1)
Currency-->>-System: Currency[id=1]
System-->>-User: Render Currency Form
Note right of User: Wait for user action
alt confirm delete
User->>+System: Confirm
System->>+Currency: delete(id=1)
Currency-->>-System: success
System->>+Currency: list()
Currency-->>-System: Currencies
System-->>-User: Render Currencies Page
else cancel delete
User->>+System: Cancel
System->>+Currency: list()
Currency-->>-System: Currencies
System-->>-User: Render Currencies Page
end
end
Delete Currency sequence.
Manage Billing and Invoicing
Configure Billing and Invoicing
Although in the user journey we have put configuring Invoice, Receipt and Billing in the same journey, this is merely a convenience in user experience. Technically, the user is configuring each model with independent UI and Confirm action.
As such, we will also design the sequence diagram independently for each action.
To avoid repetition, we will create a shared sequence diagram that will be applicable for all the actions in configuring Invoice, Receipt and Billing, and put a note in each sequence diagram to link to the shared diagram.
%%{
init: {
'theme': 'base',
'themeVariables': {
"primaryColor": "#f4e3d7",
"primaryTextColor": "#502d16",
"primaryBorderColor": "#784421",
"lineColor": "#784421",
"secondaryColor": "#a05a2c",
"tertiaryColor": "#c87137"
}
}
}%%
sequenceDiagram
participant User
participant System
participant Contact
participant Invoicing
participant Receipt
participant Billing
User->>+System: Request Contacts Page
System->>+Contact: list()
Contact-->>-System: Contacts
System-->>-User: Render Contacts Page
Note right of User: Wait for user action
User->>+System: Configure Invoice
System->>+Invoicing: listConfigs()
Invoicing-->>-System: InvoiceConfigs
System->>+Receipt: listConfigs()
Receipt-->>-System: ReceiptConfigs
System->>+Billing: listConfigs()
Billing-->>-System: BillingConfigs
System-->>-User: Render Configs Page with Invoice, Receipt, Billing Configs Sections
Note right of User: Wait for user action
Shared sequence for Configure Billing and Invoicing.
Create Invoice Config
%%{
init: {
'theme': 'base',
'themeVariables': {
"primaryColor": "#f4e3d7",
"primaryTextColor": "#502d16",
"primaryBorderColor": "#784421",
"lineColor": "#784421",
"secondaryColor": "#a05a2c",
"tertiaryColor": "#c87137"
}
}
}%%
sequenceDiagram
participant User
participant System
participant Invoicing
participant Template
participant Sequence
participant Tag
Note right of User: Initiate Shared Sequence
User->>+System: New Invoice Config
System->>+Template: list(types=[Invoice])
Template-->>-System: InvoiceTemplates
System->>+Sequence: list()
Sequence-->>-System: Sequences
System->>+Tag: list()
Tag-->>-System: Tags
System-->>-User: Render Config Form
Note right of User: Wait for user action
alt confirm
User->>+System: Input and Confirm
opt tags present
loop each tag
System->>+Tag: createIfNotExists()
Tag-->>-System: Tag[id=n]
end
end
System->>+Invoicing: createConfig()
Invoicing-->>-System: InvoiceConfig[id=1]
System-->>-User: Render Invoice Config Page
else cancel
User->>+System: Cancel
Note right of System: Retrieve Configs as per Shared Sequence
System-->>-User: Render Configs Page
end
Create Invoice Config sequence.
Create Receipt Config
%%{
init: {
'theme': 'base',
'themeVariables': {
"primaryColor": "#f4e3d7",
"primaryTextColor": "#502d16",
"primaryBorderColor": "#784421",
"lineColor": "#784421",
"secondaryColor": "#a05a2c",
"tertiaryColor": "#c87137"
}
}
}%%
sequenceDiagram
participant User
participant System
participant Receipt
participant Template
participant Sequence
Note right of User: Initiate Shared Sequence
User->>+System: New Receipt Config
System->>+Receipt: list()
Receipt-->>-System: ReceiptTemplates
System->>+Sequence: list()
Sequence-->>-System: Sequences
System-->>-User: Render Config Form
Note right of User: Wait for user action
alt confirm
User->>+System: Input and Confirm
System->>+Receipt: createConfig()
Receipt-->>-System: ReceiptConfig[id=1]
System-->>-User: Render Receipt Config Page
else cancel
User->>+System: Cancel
Note right of System: Retrieve Configs as per Shared Sequence
System-->>-User: Render Configs Page
end
Create Receipt Config sequence.
Create Billing Config
%%{
init: {
'theme': 'base',
'themeVariables': {
"primaryColor": "#f4e3d7",
"primaryTextColor": "#502d16",
"primaryBorderColor": "#784421",
"lineColor": "#784421",
"secondaryColor": "#a05a2c",
"tertiaryColor": "#c87137"
}
}
}%%
sequenceDiagram
participant User
participant System
participant Billing
participant Tag
Note right of User: Initiate Shared Sequence
User->>+System: Add Billing Config
System->>+Tag: list()
Tag-->>-System: Tags
System-->>-User: Render Config Form
Note right of User: Wait for user action
alt confirm
User->>+System: Input and Confirm
System->>+Billing: createConfig()
Billing-->>-System: BillingConfig[id=1]
System-->>-User: Render Billing Config Page
else cancel
User->>+System: Cancel
Note right of System: Retrieve Configs as per Shared Sequence
System-->>-User: Render Configs Page
end
Create Billing Config sequence.
Edit Invoice Config
%%{
init: {
'theme': 'base',
'themeVariables': {
"primaryColor": "#f4e3d7",
"primaryTextColor": "#502d16",
"primaryBorderColor": "#784421",
"lineColor": "#784421",
"secondaryColor": "#a05a2c",
"tertiaryColor": "#c87137"
}
}
}%%
sequenceDiagram
participant User
participant System
participant Invoicing
participant Template
participant Sequence
participant Tag
Note right of User: Initiate Shared Sequence
User->>+System: Edit InvoiceConfig[id=1]
System->>+Invoicing: viewConfig(id=1)
Invoicing-->>-System: InvoiceConfig[id=1]
System->>+Template: list()
Template-->>-System: InvoiceTemplates
System->>+Sequence: list()
Sequence-->>-System: Sequences
System->>+Tag: list()
Tag-->>-System: Tags
System-->>-User: Render Config Form
Note right of User: Wait for user action
alt confirm
User->>+System: Input and Confirm
opt tags present
loop each tag
System->>+Tag: createIfNotExists()
Tag-->>-System: Tag[id=n]
end
end
System->>+Invoicing: editConfig(id=1)
Invoicing-->>-System: InvoiceConfig[id=1]
System-->>-User: Render Invoice Config Page
else cancel
User->>+System: Cancel
Note right of System: Retrieve Configs as per Shared Sequence
System-->>-User: Render Configs Page
end
Edit Invoice Config sequence.
Edit Receipt Config
%%{
init: {
'theme': 'base',
'themeVariables': {
"primaryColor": "#f4e3d7",
"primaryTextColor": "#502d16",
"primaryBorderColor": "#784421",
"lineColor": "#784421",
"secondaryColor": "#a05a2c",
"tertiaryColor": "#c87137"
}
}
}%%
sequenceDiagram
participant User
participant System
participant Receipt
participant Template
participant Sequence
Note right of User: Initiate Shared Sequence
User->>+System: Edit ReceiptConfig[id=1]
System->>+Receipt: viewConfig(id=1)
Receipt-->>-System: ReceiptConfig[id=1]
System->>+Template: list()
Template-->>-System: ReceiptTemplates
System->>+Sequence: list()
Sequence-->>-System: Sequences
System-->>-User: Render Config Form
Note right of User: Wait for user action
alt confirm
User->>+System: Input and Confirm
System->>+Receipt: editConfig(id=1)
Receipt-->>-System: ReceiptConfig[id=1]
System-->>-User: Render Receipt Config Page
else cancel
User->>+System: Cancel
Note right of System: Retrieve Configs as per Shared Sequence
System-->>-User: Render Configs Page
end
Edit Receipt Config sequence.
Edit Billing Config
%%{
init: {
'theme': 'base',
'themeVariables': {
"primaryColor": "#f4e3d7",
"primaryTextColor": "#502d16",
"primaryBorderColor": "#784421",
"lineColor": "#784421",
"secondaryColor": "#a05a2c",
"tertiaryColor": "#c87137"
}
}
}%%
sequenceDiagram
participant User
participant System
participant Billing
participant Tag
Note right of User: Initiate Shared Sequence
User->>+System: Edit Billing Config
System->>+Billing: viewConfig(id=1)
Billing-->>-System: BillingConfig[id=1]
System->>+Tag: list()
Tag-->>-System: Tags
System-->>-User: Render Config Form
Note right of User: Wait for user action
alt confirm
User->>+System: Input and Confirm
System->>+Billing: editConfig(id=1)
Billing-->>-System: BillingConfig[id=1]
System-->>-User: Render Billing Config Page
else cancel
User->>+System: Cancel
Note right of System: Retrieve Configs as per Shared Sequence
System-->>-User: Render Configs Page
end
Edit Billing Config sequence.
Delete Invoice Config
%%{
init: {
'theme': 'base',
'themeVariables': {
"primaryColor": "#f4e3d7",
"primaryTextColor": "#502d16",
"primaryBorderColor": "#784421",
"lineColor": "#784421",
"secondaryColor": "#a05a2c",
"tertiaryColor": "#c87137"
}
}
}%%
sequenceDiagram
participant User
participant System
participant Invoicing
Note right of User: Initiate Shared Sequence
alt config in used
User->>+System: Delete InvoiceConfig[id=1]
System->>+Invoicing: configIsUsed(id=1)
Invoicing-->>-System: true
System-->>-User: Abort and Display Error
else config not in used
User->>+System: Delete InvoiceConfig[id=1]
System->>+Invoicing: configIsUsed(id=1)
Invoicing-->>-System: false
System-->>-User: Render Config Form
Note right of User: Wait for user action
alt confirm delete
User->>+System: Confirm
System->>+Invoicing: deleteConfig(id=1)
Invoicing-->>-System: success
Note right of System: Retrieve Configs as per Shared Sequence
System-->>-User: Render Configs Page
else cancel delete
User->>+System: Cancel
Note right of System: Retrieve Configs as per Shared Sequence
System-->>-User: Render Configs Page
end
end
Delete Invoice Config sequence.
Delete Receipt Config
%%{
init: {
'theme': 'base',
'themeVariables': {
"primaryColor": "#f4e3d7",
"primaryTextColor": "#502d16",
"primaryBorderColor": "#784421",
"lineColor": "#784421",
"secondaryColor": "#a05a2c",
"tertiaryColor": "#c87137"
}
}
}%%
sequenceDiagram
participant User
participant System
participant Receipt
Note right of User: Initiate Shared Sequence
alt config in used
User->>+System: Delete ReceiptConfig[id=1]
System->>+Receipt: configIsUsed(id=1)
Receipt-->>-System: true
System-->>-User: Abort and Display Error
else config not in used
User->>+System: Delete ReceiptConfig[id=1]
System->>+Receipt: configIsUsed(id=1)
Receipt-->>-System: false
System-->>-User: Render Config Form
Note right of User: Wait for user action
alt confirm delete
User->>+System: Confirm
System->>+Receipt: deleteConfig(id=1)
Receipt-->>-System: success
Note right of System: Retrieve Configs as per Shared Sequence
System-->>-User: Render Configs Page
else cancel delete
User->>+System: Cancel
Note right of System: Retrieve Configs as per Shared Sequence
System-->>-User: Render Configs Page
end
end
Delete Receipt Config sequence.
Delete Billing Config
%%{
init: {
'theme': 'base',
'themeVariables': {
"primaryColor": "#f4e3d7",
"primaryTextColor": "#502d16",
"primaryBorderColor": "#784421",
"lineColor": "#784421",
"secondaryColor": "#a05a2c",
"tertiaryColor": "#c87137"
}
}
}%%
sequenceDiagram
participant User
participant System
participant Billing
Note right of User: Initiate Shared Sequence
alt config in used
User->>+System: Delete BillingConfig[id=1]
System->>+Billing: configIsUsed(id=1)
Billing-->>-System: true
System-->>-User: Abort and Display Error
else config not in used
User->>+System: Delete BillingConfig[id=1]
System->>+Billing: configIsUsed(id=1)
Billing-->>-System: false
System-->>-User: Render Config Form
Note right of User: Wait for user action
alt confirm delete
User->>+System: Confirm
System->>+Billing: deleteConfig(id=1)
Billing-->>-System: success
Note right of System: Retrieve Configs as per Shared Sequence
System-->>-User: Render Configs Page
else cancel delete
User->>+System: Cancel
Note right of System: Retrieve Configs as per Shared Sequence
System-->>-User: Render Configs Page
end
end
Delete Billing Config sequence.
Manage Templates
Create Template
%%{
init: {
'theme': 'base',
'themeVariables': {
"primaryColor": "#f4e3d7",
"primaryTextColor": "#502d16",
"primaryBorderColor": "#784421",
"lineColor": "#784421",
"secondaryColor": "#a05a2c",
"tertiaryColor": "#c87137"
}
}
}%%
sequenceDiagram
participant User
participant System
participant Template
User->>+System: Request Templates Page
System->>+Template: list()
Template-->>-System: Templates
System-->>-User: Render Templates Page
Note right of User: Wait for user action
User->>+System: New Template
System-->>-User: Render Template Form
Note right of User: Wait for user action
alt confirm
User->>+System: Input and Confirm
System->>+Template: create()
Template-->>-System: Template[id=1]
System-->>-User: Render Template Page
else cancel
User->>+System: Cancel
System->>+Template: list()
Template-->>-System: Templates
System-->>-User: Render Templates Page
end
Create Template sequence.
Edit Template
%%{
init: {
'theme': 'base',
'themeVariables': {
"primaryColor": "#f4e3d7",
"primaryTextColor": "#502d16",
"primaryBorderColor": "#784421",
"lineColor": "#784421",
"secondaryColor": "#a05a2c",
"tertiaryColor": "#c87137"
}
}
}%%
sequenceDiagram
participant User
participant System
participant Template
User->>+System: Request Templates Page
System->>+Template: list()
Template-->>-System: Templates
System-->>-User: Render Templates Page
Note right of User: Wait for user action
User->>+System: Edit Template[id=1]
System-->>-User: Render Template Form
Note right of User: Wait for user action
alt confirm
User->>+System: Input and Confirm
System->>+Template: edit(id=1)
Template-->>-System: Template[id=1]
System-->>-User: Render Template Page
else cancel
User->>+System: Cancel
System->>+Template: list()
Template-->>-System: Templates
System-->>-User: Render Templates Page
end
Edit Template sequence.
Delete Template
%%{
init: {
'theme': 'base',
'themeVariables': {
"primaryColor": "#f4e3d7",
"primaryTextColor": "#502d16",
"primaryBorderColor": "#784421",
"lineColor": "#784421",
"secondaryColor": "#a05a2c",
"tertiaryColor": "#c87137"
}
}
}%%
sequenceDiagram
participant User
participant System
participant Template
User->>+System: Request Templates Page
System->>+Template: list()
Template-->>-System: Templates
System-->>-User: Render Templates Page
Note right of User: Wait for user action
alt template in used
User->>+System: Delete Template[id=1]
System->>+Template: isUsed(id=1)
Template-->>-System: true
System-->>-User: Abort and Display Error
else template not in used
User->>+System: Delete Template[id=1]
System->>+Template: isUsed(id=1)
Template-->>-System: false
System-->>-User: Render Template Form
Note right of User: Wait for user action
alt confirm delete
User->>+System: Confirm
System->>+Template: delete(id=1)
Template-->>-System: success
System->>+Template: list()
Template-->>-System: Templates
System-->>-User: Render Templates Page
else cancel delete
User->>+System: Cancel
System->>+Template: list()
Template-->>-System: Templates
System-->>-User: Render Templates Page
end
end
Delete Template sequence.
Manage Sequences
Create Sequence
%%{
init: {
'theme': 'base',
'themeVariables': {
"primaryColor": "#f4e3d7",
"primaryTextColor": "#502d16",
"primaryBorderColor": "#784421",
"lineColor": "#784421",
"secondaryColor": "#a05a2c",
"tertiaryColor": "#c87137"
}
}
}%%
sequenceDiagram
participant User
participant System
participant Sequence
User->>+System: Request Sequences Page
System->>+Sequence: list()
Sequence-->>-System: Sequences
System-->>-User: Render Sequences Page
Note right of User: Wait for user action
User->>+System: New Sequence
System-->>-User: Render Sequence Form
Note right of User: Wait for user action
alt confirm
User->>+System: Input and Confirm
System->>+Sequence: create()
Sequence-->>-System: Sequence[id=1]
System-->>-User: Render Sequence Page
else cancel
User->>+System: Cancel
System->>+Sequence: list()
Sequence-->>-System: Sequences
System-->>-User: Render Sequences Page
end
Create Sequence sequence.
Delete Sequence
%%{
init: {
'theme': 'base',
'themeVariables': {
"primaryColor": "#f4e3d7",
"primaryTextColor": "#502d16",
"primaryBorderColor": "#784421",
"lineColor": "#784421",
"secondaryColor": "#a05a2c",
"tertiaryColor": "#c87137"
}
}
}%%
sequenceDiagram
participant User
participant System
participant Sequence
User->>+System: Request Sequences Page
System->>+Sequence: list()
Sequence-->>-System: Sequences
System-->>-User: Render Sequences Page
Note right of User: Wait for user action
alt sequence in used
User->>+System: Delete Sequence[id=1]
System->>+Sequence: isUsed(id=1)
Sequence-->>-System: true
System-->>-User: Abort and Display Error
else sequence not in used
User->>+System: Delete Sequence[id=1]
System->>+Sequence: isUsed(id=1)
Sequence-->>-System: false
System-->>-User: Render Sequence Form
Note right of User: Wait for user action
alt confirm delete
User->>+System: Confirm
System->>+Sequence: delete(id=1)
Sequence-->>-System: success
System->>+Sequence: list()
Sequence-->>-System: Sequences
System-->>-User: Render Sequences Page
else cancel
User->>+System: Cancel
System->>+Sequence: list()
Sequence-->>-System: Sequences
System-->>-User: Render Sequences Page
end
end
Delete Sequence sequence.
Manage Invoices
Generate Invoice
We have identified 2 different user journeys for generating Invoices. One involves the basic generation where the Invoice Lines are all generated automatically from Work Logs, and the other is where the user adds additional Invoice Lines.
Both actually interact with the system in the same way, except for the difference in the UI, so we will only design the common system sequence for both journeys.
%%{
init: {
'theme': 'base',
'themeVariables': {
"primaryColor": "#f4e3d7",
"primaryTextColor": "#502d16",
"primaryBorderColor": "#784421",
"lineColor": "#784421",
"secondaryColor": "#a05a2c",
"tertiaryColor": "#c87137"
}
}
}%%
sequenceDiagram
participant User
participant System
participant WorkLog
participant Invoicing
participant Tag
participant Document
User->>+System: Request Work Logs Page
System->>+WorkLog: list()
WorkLog-->>-System: WorkLogs
System-->>-User: Render WorkLogs Page
Note right of User: Wait for user action
User->>+System: Generate Invoice
System->>+Invoicing: listConfigs()
Invoicing-->>-System: InvoiceConfigs
System->>+Tag: list()
Tag-->>-System: Tags
System-->>-User: Render Invoice Form
Note right of User: Wait for user action
alt confirm preview
User->>+System: Input and Preview
System->>+WorkLog: list(filters)
WorkLog-->>-System: WorkLogs
System->>+Invoicing: previewInvoice(options=options, workLogs=workLogs, invoiceLines=lines)
Invoicing-->>-System: Invoice[tempId=1]
System->>-User: Render Invoice Preview
Note right of User: Wait for user action
alt confirm generate
User->>+System: Generate
opt tags present
loop each tag
System->>+Tag: createIfNotExists()
Tag-->>-System: Tag[id=n]
end
end
System->>+Invoicing: generateInvoiceFromPreview(tempId=1)
Invoicing->>+Document: create()
Document-->>-Invoicing: Document[id=1]
Invoicing-->>-System: Invoice[id=1]
System-->>-User: Render Invoice Page
else cancel generate
User->>+System: Cancel
System->>+WorkLog: list()
WorkLog-->>-System: WorkLogs
System-->>-User: Render Work Logs Page
end
else cancel preview
User->>+System: Cancel
System->>+WorkLog: list()
WorkLog-->>-System: WorkLogs
System-->>-User: Render Work Logs Page
end
Generate Invoice sequence.
Edit Invoice
%%{
init: {
'theme': 'base',
'themeVariables': {
"primaryColor": "#f4e3d7",
"primaryTextColor": "#502d16",
"primaryBorderColor": "#784421",
"lineColor": "#784421",
"secondaryColor": "#a05a2c",
"tertiaryColor": "#c87137"
}
}
}%%
sequenceDiagram
participant User
participant System
participant Invoicing
participant Tag
participant Document
User->>+System: Request Invoices Page
System->>+Invoicing: listInvoices()
Invoicing-->>-System: Invoices
System-->>-User: Render Invoices Page
Note right of User: Wait for user action
User->>+System: Edit Invoice[id=1]
System->>+Invoicing: viewInvoice(id=1)
Invoicing-->>-System: Invoice[id=1]
System->>+Tag: list()
Tag-->>-System: Tags
System-->>-User: Render Invoice Form
Note right of User: Wait for user action
alt confirm preview
User->>+System: Input and Preview
System->>+Invoicing: previewInvoice(options=options, workLogs=Invoice[id=1].workLogs, invoiceLines=Invoice[id=1].lines)
Invoicing-->>-System: Invoice[tempId=1]
System->>-User: Render Invoice Preview
Note right of User: Wait for user action
alt confirm generate
User->>+System: Generate
opt tags present
loop each tag
System->>+Tag: createIfNotExists()
Tag-->>-System: Tag[id=n]
end
end
System->>+Invoicing: generateInvoiceFromPreview(tempId=1)
Invoicing->>+Document: create()
Document-->>-Invoicing: Document[id=2]
Invoicing-->>-System: Invoice[id=1]
System-->>-User: Render Invoice Page
else cancel generate
User->>+System: Cancel
System->>+Invoicing: listInvoices()
Invoicing-->>-System: Invoices
System-->>-User: Render Invoices Page
end
else cancel preview
User->>+System: Cancel
System->>+Invoicing: listInvoices()
Invoicing-->>-System: Invoices
System-->>-User: Render Invoices Page
end
Edit Invoice sequence.
Void Invoice
%%{
init: {
'theme': 'base',
'themeVariables': {
"primaryColor": "#f4e3d7",
"primaryTextColor": "#502d16",
"primaryBorderColor": "#784421",
"lineColor": "#784421",
"secondaryColor": "#a05a2c",
"tertiaryColor": "#c87137"
}
}
}%%
sequenceDiagram
participant User
participant System
participant Invoicing
User->>+System: Request Invoices Page
System->>+Invoicing: listInvoices()
Invoicing-->>-System: Invoices
System-->>-User: Render Invoices Page
Note right of User: Wait for user action
User->>+System: Void Invoice[id=1]
System->>+Invoicing: viewInvoice(id=1)
Invoicing-->>-System: Invoice[id=1]
System-->>-User: Render Invoice Form
Note right of User: Wait for user action
alt confirm
User->>+System: Confirm
System->>+Invoicing: voidInvoice(id=1)
Invoicing-->>-System: Invoice[id=1]
System-->>-User: Render Invoice Page
else cancel
User->>+System: Cancel
System->>+Invoicing: listInvoices()
Invoicing-->>-System: Invoices
System-->>-User: Render Invoices Page
end
Void Invoice sequence.
Manage Transactions
Create Transaction
%%{
init: {
'theme': 'base',
'themeVariables': {
"primaryColor": "#f4e3d7",
"primaryTextColor": "#502d16",
"primaryBorderColor": "#784421",
"lineColor": "#784421",
"secondaryColor": "#a05a2c",
"tertiaryColor": "#c87137"
}
}
}%%
sequenceDiagram
participant User
participant System
participant Transaction
participant Tag
User->>+System: Request Transactions Page
System->>+Transaction: list()
Transaction-->>-System: Transactions
System-->>-User: Render Transactions Page
Note right of User: Wait for user action
User->>+System: New Transaction
System->>+Tag: list()
Tag-->>-System: Tags
System-->>-User: Render Transaction Form
Note right of User: Wait for user action
alt confirm
User->>+System: Input and Confirm
opt tags present
loop each tag
System->>+Tag: createIfNotExists()
Tag-->>-System: Tag[id=n]
end
end
System->>+Transaction: create()
Transaction-->>-System: Transaction[id=1]
System-->>-User: Render Transaction Page
else cancel
User->>+System: Cancel
System->>+Transaction: list()
Transaction-->>-System: Transactions
System-->>-User: Render Transactions Page
end
Create Transaction sequence.
Edit Transaction
%%{
init: {
'theme': 'base',
'themeVariables': {
"primaryColor": "#f4e3d7",
"primaryTextColor": "#502d16",
"primaryBorderColor": "#784421",
"lineColor": "#784421",
"secondaryColor": "#a05a2c",
"tertiaryColor": "#c87137"
}
}
}%%
sequenceDiagram
participant User
participant System
participant Transaction
participant Tag
User->>+System: Request Transactions Page
System->>+Transaction: list()
Transaction-->>-System: Transactions
System-->>-User: Render Transactions Page
Note right of User: Wait for user action
User->>+System: Edit Transaction[id=1]
System->>+Transaction: view(id=1)
Transaction-->>-System: Transaction[id=1]
System->>+Tag: list()
Tag-->>-System: Tags
System-->>-User: Render Transaction Form
Note right of User: Wait for user action
alt confirm
User->>+System: Input and Confirm
opt tags present
loop each tag
System->>+Tag: createIfNotExists()
Tag-->>-System: Tag[id=n]
end
end
System->>+Transaction: edit(id=1)
Transaction-->>-System: Transaction[id=1]
System-->>-User: Render Transaction Page
else cancel
User->>+System: Cancel
System->>+Transaction: list()
Transaction-->>-System: Transactions
System-->>-User: Render Transactions Page
end
Edit Transaction sequence.
Reverse Transaction
%%{
init: {
'theme': 'base',
'themeVariables': {
"primaryColor": "#f4e3d7",
"primaryTextColor": "#502d16",
"primaryBorderColor": "#784421",
"lineColor": "#784421",
"secondaryColor": "#a05a2c",
"tertiaryColor": "#c87137"
}
}
}%%
sequenceDiagram
participant User
participant System
participant Transaction
participant Tag
User->>+System: Request Transactions Page
System->>+Transaction: list()
Transaction-->>-System: Transactions
System-->>-User: Render Transactions Page
Note right of User: Wait for user action
User->>+System: Reverse Transaction[id=1]
System->>+Transaction: view(id=1)
Transaction-->>-System: Transaction[id=1]
System->>+Tag: list()
Tag-->>-System: Tags
System-->>-User: Render Transaction Form
Note right of User: Wait for user action
alt confirm
User->>+System: Input and Confirm
opt tags present
loop each tag
System->>+Tag: createIfNotExists()
Tag-->>-System: Tag[id=n]
end
end
System->>+Transaction: create(type=Reverse, associated_id=1)
Transaction-->>-System: Transaction[id=2]
System-->>-User: Render Transaction Page
else cancel
User->>+System: Cancel
System->>+Transaction: list()
Transaction-->>-System: Transactions
System-->>-User: Render Transactions Page
end
Reverse Transaction sequence.
Delete Transaction
%%{
init: {
'theme': 'base',
'themeVariables': {
"primaryColor": "#f4e3d7",
"primaryTextColor": "#502d16",
"primaryBorderColor": "#784421",
"lineColor": "#784421",
"secondaryColor": "#a05a2c",
"tertiaryColor": "#c87137"
}
}
}%%
sequenceDiagram
participant User
participant System
participant Transaction
participant Tag
User->>+System: Request Transactions Page
System->>+Transaction: list()
Transaction-->>-System: Transactions
System-->>-User: Render Transactions Page
Note right of User: Wait for user action
alt transaction in use
User->>+System: Delete Transaction[id=1]
System->>+Transaction: isUsed(id=1)
Transaction-->>-System: true
System-->>-User: Abort and Display Error
else transaction not in use
User->>+System: Delete Transaction[id=1]
System->>+Transaction: isUsed(id=1)
Transaction-->>-System: false
System->>+Transaction: view(id=1)
Transaction-->>-System: Transaction[id=1]
System-->>-User: Render Transaction Form
Note right of User: Wait for user action
alt confirm
User->>+System: Confirm
System->>+Transaction: delete(id=1)
Transaction-->>-System: success
System->>+Transaction: list()
Transaction-->>-System: Transactions
System-->>-User: Render Transactions Page
else cancel
User->>+System: Cancel
System->>+Transaction: list()
Transaction-->>-System: Transactions
System-->>-User: Render Transactions Page
end
end
Delete Transaction sequence.
Let’s Take a Break
We’ve covered quite a lot in this article, let’s take a break for now and we will continue with the remaining sequence diagrams in the next one.