Sequence Diagram Design (Continued)
In the previous article, we’ve covered a few sequence diagram designs related to these functions:
- Tag-based Time Tracking
- Manage Tags
- Manage Contacts
- Manage Currencies
- Manage Billing and Invoicing
- Manage Templates
- Manage Sequences
- Manage Invoices
- Manage Transactions
We’ve also created our system components diagrams to give us a better view of which components are interacting in each sequence diagram, using what functions available in each component.
In this article, we will continue with the remaining functions:
- Manage Receipts
- Manage Documents
- Manage Taxation
- Manage Charts
- Manage Recurring Tasks
- Manage System Configs
- Manage Users
Manage Income Receipts
Generate Income Receipt
%%{ init: { 'theme': 'base', 'themeVariables': { "primaryColor": "#f4e3d7", "primaryTextColor": "#502d16", "primaryBorderColor": "#784421", "lineColor": "#784421", "secondaryColor": "#a05a2c", "tertiaryColor": "#c87137" } } }%% sequenceDiagram participant User participant System participant Invoicing participant Receipt participant Tag participant Document participant Transaction 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: Generate Receipt[invoiceId=1] System->>+Receipt: listConfigs() Receipt-->>-System: ReceiptConfigs System->>+Tag: list() Tag-->>-System: Tags System-->>-User: Render Receipt Form Note right of User: Wait for user action alt confirm preview User->>+System: Input and Preview System->>+Receipt: previewIncomeReceipt(invoiceId=1, options) Receipt-->>-System: IncomeReceipt[tempId=1] System->>-User: Render Receipt 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->>+Receipt: generateIncomeReceiptFromPreview(tempId=1) Receipt->>+Document: create() Document-->>-Receipt: Document[id=1] Receipt-->>-System: IncomeReceipt[id=1] System->>+Transaction: create(type=Income) Transaction-->>-System: Transaction[id=1] System-->>-User: Render Receipt 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
Void Income Receipt
%%{ init: { 'theme': 'base', 'themeVariables': { "primaryColor": "#f4e3d7", "primaryTextColor": "#502d16", "primaryBorderColor": "#784421", "lineColor": "#784421", "secondaryColor": "#a05a2c", "tertiaryColor": "#c87137" } } }%% sequenceDiagram participant User participant System participant Receipt participant Tag participant Document User->>+System: Request Income Receipts Page System->>+Receipt: listIncomeReceipts() Receipt-->>-System: Income Receipts System-->>-User: Render Income Receipts Page Note right of User: Wait for user action User->>+System: Void IncomeReceipt[id=1] System->>+Receipt: viewIncomeReceipt(id=1) Receipt-->>-System: IncomeReceipt[id=1] System-->>-User: Render Income Receipt Form Note right of User: Wait for user action alt confirm void User->>+System: Confirm System->>+Receipt: voidIncomeReceipt(id=1) Receipt-->>-System: IncomeReceipt[id=1] System->>+Transaction: create(type=Income Reversal) Transaction-->>-System: Transaction[id=2] System-->>-User: Render Income Receipt Page opt regenerate receipt User->>+System: Regenerate Receipt[invoiceId=1] System->>+Receipt: listConfigs() Receipt-->>-System: ReceiptConfigs System->>+Tag: list() Tag-->>-System: Tags System-->>-User: Render Receipt Form Note right of User: Wait for user action alt confirm preview User->>+System: Input and Preview System->>+Receipt: previewIncomeReceipt(invoiceId=1, options) Receipt-->>-System: IncomeReceipt[tempId=1] System->>-User: Render Receipt Preview Note right of User: Wait for user action alt confirm regenerate User->>+System: Generate opt tags present loop each tag System->>+Tag: createIfNotExists() Tag-->>-System: Tag[id=n] end end System->>+Receipt: generateIncomeReceiptFromPreview(tempId=1) Receipt->>+Document: create() Document-->>-Receipt: Document[id=1] Receipt-->>-System: IncomeReceipt[id=2] System->>+Transaction: create(type=Income) Transaction-->>-System: Transaction[id=3] System-->>-User: Render Income Receipt Page else cancel regenerate User->>+System: Cancel System->>+Receipt: viewIncomeReceipt(id=1) Receipt-->>-System: IncomeReceipt[id=1] System-->>-User: Render Income Receipt Page end else cancel preview User->>+System: Cancel System->>+Receipt: viewIncomeReceipt(id=1) Receipt-->>-System: IncomeReceipt[id=1] System-->>-User: Render Income Receipt Page end end else cancel void User->>+System: Cancel System->>+Receipt: listIncomeReceipts() Receipt-->>-System: IncomeReceipts System-->>-User: Render Income Receipts Page end
Upload Income Receipt
%%{ init: { 'theme': 'base', 'themeVariables': { "primaryColor": "#f4e3d7", "primaryTextColor": "#502d16", "primaryBorderColor": "#784421", "lineColor": "#784421", "secondaryColor": "#a05a2c", "tertiaryColor": "#c87137" } } }%% sequenceDiagram participant User participant System participant Receipt participant Tag participant Document participant Transaction User->>+System: Request Income Receipts Page System->>+Receipt: listIncomeReceipts() Receipt-->>-System: IncomeReceipts System-->>-User: Render Income Receipts Page Note right of User: Wait for user action User->>+System: Upload Receipt System->>+Tag: list() Tag-->>-System: Tags System-->>-User: Render Upload 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->>+Receipt: uploadIncomeReceipt() Receipt->>+Document: create() Document-->>-Receipt: Document[id=1] Receipt-->>-System: IncomeReceipt[id=1] System->>+Transaction: create(type=Income) Transaction-->>-System: Transaction[id=1] System-->>-User: Render Receipt Page else cancel User->>+System: Cancel System->>+Receipt: listIncomeReceipts() Receipt-->>-System: IncomeReceipts System-->>-User: Render Income Receipts Page end
Delete Uploaded Income Receipt
%%{ init: { 'theme': 'base', 'themeVariables': { "primaryColor": "#f4e3d7", "primaryTextColor": "#502d16", "primaryBorderColor": "#784421", "lineColor": "#784421", "secondaryColor": "#a05a2c", "tertiaryColor": "#c87137" } } }%% sequenceDiagram participant User participant System participant Receipt participant Document participant Transaction User->>+System: Request Income Receipts Page System->>+Receipt: listIncomeReceipts() Receipt-->>-System: IncomeReceipts System-->>-User: Render Income Receipts Page Note right of User: Wait for user action User->>+System: Delete Uploaded IncomeReceipt[id=1] System-->>-User: Render Delete Form Note right of User: Wait for user action alt confirm User->>+System: Confirm System->>+Receipt: deleteUploadedIncomeReceipt(id=1) Receipt->>+Document: delete(id=1) Document-->>-Receipt: success Receipt-->>-System: success System->>+Transaction: create(type=Income Reversal) Transaction-->>-System: Transaction[id=1] System->>+Receipt: listIncomeReceipts() Receipt-->>-System: IncomeReceipts System-->>-User: Render Income Receipts Page else cancel User->>+System: Cancel System->>+Receipt: listIncomeReceipts() Receipt-->>-System: IncomeReceipts System-->>-User: Render Income Receipts Page end
Manage Expense Receipts
Upload Expense Receipt
%%{ init: { 'theme': 'base', 'themeVariables': { "primaryColor": "#f4e3d7", "primaryTextColor": "#502d16", "primaryBorderColor": "#784421", "lineColor": "#784421", "secondaryColor": "#a05a2c", "tertiaryColor": "#c87137" } } }%% sequenceDiagram participant User participant System participant Receipt participant Tag participant Document participant Transaction User->>+System: Request Expense Receipts Page System->>+Receipt: listExpenseReceipts() Receipt-->>-System: ExpenseReceipts System-->>-User: Render Expense Receipts Page Note right of User: Wait for user action User->>+System: Upload Receipt System->>+Tag: list() Tag-->>-System: Tags System-->>-User: Render Upload 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->>+Receipt: uploadExpenseReceipt() Receipt->>+Document: create() Document-->>-Receipt: Document[id=1] Receipt-->>-System: ExpenseReceipt[id=1] System->>+Transaction: create(type=Expense) Transaction-->>-System: Transaction[id=1] System-->>-User: Render Receipt Page else cancel User->>+System: Cancel System->>+Receipt: listExpenseReceipts() Receipt-->>-System: ExpenseReceipts System-->>-User: Render Expense Receipts Page end
Delete Uploaded Expense Receipt
%%{ init: { 'theme': 'base', 'themeVariables': { "primaryColor": "#f4e3d7", "primaryTextColor": "#502d16", "primaryBorderColor": "#784421", "lineColor": "#784421", "secondaryColor": "#a05a2c", "tertiaryColor": "#c87137" } } }%% sequenceDiagram participant User participant System participant Receipt participant Document participant Transaction User->>+System: Request Expense Receipts Page System->>+Receipt: listExpenseReceipts() Receipt-->>-System: ExpenseReceipts System-->>-User: Render Expense Receipts Page Note right of User: Wait for user action User->>+System: Delete Uploaded ExpenseReceipt[id=1] System-->>-User: Render Delete Form Note right of User: Wait for user action alt confirm User->>+System: Confirm System->>+Receipt: deleteUploadedExpenseReceipt(id=1) Receipt->>+Document: delete(id=1) Document-->>-Receipt: success Receipt-->>-System: success System->>+Transaction: create(type=Expense Reversal) Transaction-->>-System: Transaction[id=1] System->>+Receipt: listExpenseReceipts() Receipt-->>-System: ExpenseReceipts System-->>-User: Render Expense Receipts Page else cancel User->>+System: Cancel System->>+Receipt: listExpenseReceipts() Receipt-->>-System: ExpenseReceipts System-->>-User: Render Expense Receipts Page end
Manage Documents
Download Documents
%%{ init: { 'theme': 'base', 'themeVariables': { "primaryColor": "#f4e3d7", "primaryTextColor": "#502d16", "primaryBorderColor": "#784421", "lineColor": "#784421", "secondaryColor": "#a05a2c", "tertiaryColor": "#c87137" } } }%% sequenceDiagram participant User participant System participant Document User->>+System: Request Documents Page System->>+Document: list() Document-->>-System: Documents System-->>-User: Render Documents Page Note right of User: Wait for user action User->>+System: Download Documents System-->>-User: Render Download Form Note right of User: Wait for user action alt confirm User->>+System: Input and Confirm System->>+Document: download(filters) Document-->>-System: Raw Files System-->>-User: Render Save Files Page else cancel User->>+System: Cancel System->>+Document: list() Document-->>-System: Documents System-->>-User: Render Documents Page end
Tag Documents
%%{ init: { 'theme': 'base', 'themeVariables': { "primaryColor": "#f4e3d7", "primaryTextColor": "#502d16", "primaryBorderColor": "#784421", "lineColor": "#784421", "secondaryColor": "#a05a2c", "tertiaryColor": "#c87137" } } }%% sequenceDiagram participant User participant System participant Document participant Tag User->>+System: Request Documents Page System->>+Document: list() Document-->>-System: Documents System-->>-User: Render Documents Page Note right of User: Wait for user action User->>+System: Tag Document[id=1] System->>+Document: view(id=1) Document-->>-System: Document[id=1] System->>+Tag: list() Tag-->>-System: Tags System-->>-User: Render Document 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->>+Document: tag(id=1, tags=tags) Document-->>-System: Document[id=1] System-->>-User: Render Document Page else cancel User->>+System: Cancel System->>+Document: list() Document-->>-System: Documents System-->>-User: Render Documents Page end
Manage Taxation
Create Tax Table
%%{ init: { 'theme': 'base', 'themeVariables': { "primaryColor": "#f4e3d7", "primaryTextColor": "#502d16", "primaryBorderColor": "#784421", "lineColor": "#784421", "secondaryColor": "#a05a2c", "tertiaryColor": "#c87137" } } }%% sequenceDiagram participant User participant System participant Taxation User->>+System: Request Tax Tables Page System->>+Taxation: listTaxTables() Taxation-->>-System: TaxTables System-->>-User: Render Tax Tables Page Note right of User: Wait for user action User->>+System: New Tax Table System-->>-User: Render Tax Table Form Note right of User: Wait for user action alt confirm User->>+System: Input and Confirm System->>+Taxation: createTaxTable() Taxation-->>-System: TaxTable[id=1] System-->>-User: Render Tax Table Page Note right of System: Follow the Create Tax Tier sequence else cancel User->>+System: Cancel System->>+Taxation: listTaxTables() Taxation-->>-System: TaxTables System-->>-User: Render TaxTables Page end
Create Tax Tier
%%{ init: { 'theme': 'base', 'themeVariables': { "primaryColor": "#f4e3d7", "primaryTextColor": "#502d16", "primaryBorderColor": "#784421", "lineColor": "#784421", "secondaryColor": "#a05a2c", "tertiaryColor": "#c87137" } } }%% sequenceDiagram participant User participant System participant Taxation User->>+System: Request Tax Tiers Section System->>+Taxation: listTaxTiers(tableId) Taxation-->>-System: TaxTiers System-->>-User: Render Tax Tiers Section Note right of User: Rendered as a section within Tax Table Page Note right of User: Wait for user action User->>+System: Add Tax Tier System-->>-User: Render Tax Tier Form Note right of User: Wait for user action alt confirm User->>+System: Input and Confirm System->>+Taxation: createTaxTier() Taxation-->>-System: TaxTier[id=1] System->>+Taxation: listTaxTiers(tableId) Taxation-->>-System: TaxTiers System-->>-User: Render Tax Tiers Section else cancel User->>+System: Cancel System->>+Taxation: listTaxTiers() Taxation-->>-System: TaxTiers System-->>-User: Render Tax Tiers Section end
Create Tax Deductible
%%{ init: { 'theme': 'base', 'themeVariables': { "primaryColor": "#f4e3d7", "primaryTextColor": "#502d16", "primaryBorderColor": "#784421", "lineColor": "#784421", "secondaryColor": "#a05a2c", "tertiaryColor": "#c87137" } } }%% sequenceDiagram participant User participant System participant Taxation participant Tag User->>+System: Request Tax Deductibles Section System->>+Taxation: listTaxDeductibles(tableId) Taxation-->>-System: TaxDeductibles System-->>-User: Render Tax Deductibles Section Note right of User: Rendered as a section within Tax Table Page Note right of User: Wait for user action User->>+System: Add Tax Deductible System->>+Tag: list() Tag-->>-System: Tags System-->>-User: Render Tax Deductible 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->>+Taxation: createTaxDeductible() Taxation-->>-System: TaxDeductible[id=1] System->>+Taxation: listTaxDeductibles(tableId) Taxation-->>-System: TaxDeductibles System-->>-User: Render Tax Deductibles Section else cancel User->>+System: Cancel System->>+Taxation: listTaxDeductibles() Taxation-->>-System: TaxDeductibles System-->>-User: Render Tax Deductibles Section end
Edit Tax Table
%%{ init: { 'theme': 'base', 'themeVariables': { "primaryColor": "#f4e3d7", "primaryTextColor": "#502d16", "primaryBorderColor": "#784421", "lineColor": "#784421", "secondaryColor": "#a05a2c", "tertiaryColor": "#c87137" } } }%% sequenceDiagram participant User participant System participant Taxation User->>+System: Request Tax Tables Page System->>+Taxation: listTaxTables() Taxation-->>-System: TaxTables System-->>-User: Render Tax Tables Page Note right of User: Wait for user action User->>+System: Edit TaxTable[id=1] System->>+Taxation: viewTaxTable(id=1) Taxation-->>-System: TaxTable[id=1] System-->>-User: Render Tax Table Form Note right of User: Wait for user action alt confirm User->>+System: Input and Confirm System->>+Taxation: editTaxTable(id=1) Taxation-->>-System: TaxTable[id=1] System-->>-User: Render Tax Table Page else cancel User->>+System: Cancel System->>+Taxation: listTaxTables() Taxation-->>-System: TaxTables System-->>-User: Render TaxTables Page end
Edit Tax Tier
%%{ init: { 'theme': 'base', 'themeVariables': { "primaryColor": "#f4e3d7", "primaryTextColor": "#502d16", "primaryBorderColor": "#784421", "lineColor": "#784421", "secondaryColor": "#a05a2c", "tertiaryColor": "#c87137" } } }%% sequenceDiagram participant User participant System participant Taxation User->>+System: Request Tax Tables Page System->>+Taxation: listTaxTables() Taxation-->>-System: TaxTables System-->>-User: Render Tax Tables Page Note right of User: Wait for user action User->>+System: Edit TaxTiers[id=1] System->>+Taxation: viewTaxTable(id=1) Taxation-->>-System: TaxTable[id=1] System->>+Taxation: listTaxTiers(tableId=1) Taxation-->>-System: TaxTiers System-->>-User: Render Tax Table Page with Tax Tiers Section Note right of User: Wait for user action User->>+System: Edit TaxTier[id=1] System->>+Taxation: viewTaxTier(id=1) Taxation-->>-System: TaxTier[id=1] System-->>-User: Render Tax Tier Form Note right of User: Wait for user action alt confirm User->>+System: Input and Confirm System->>+Taxation: editTaxTier(id=1) Taxation-->>-System: TaxTier[id=1] System->>+Taxation: listTaxTiers(tableId=1) Taxation-->>-System: TaxTiers System-->>-User: Render Tax Tiers Section else cancel User->>+System: Cancel System->>+Taxation: listTaxTiers(tableId=1) Taxation-->>-System: TaxTiers System-->>-User: Render Tax Tiers Section end
Edit Tax Deductible
%%{ init: { 'theme': 'base', 'themeVariables': { "primaryColor": "#f4e3d7", "primaryTextColor": "#502d16", "primaryBorderColor": "#784421", "lineColor": "#784421", "secondaryColor": "#a05a2c", "tertiaryColor": "#c87137" } } }%% sequenceDiagram participant User participant System participant Taxation participant Tag User->>+System: Request Tax Tables Page System->>+Taxation: listTaxTables() Taxation-->>-System: TaxTables System-->>-User: Render Tax Tables Page Note right of User: Wait for user action User->>+System: Edit TaxDeductibles[id=1] System->>+Taxation: viewTaxTable(id=1) Taxation-->>-System: TaxTable[id=1] System->>+Taxation: listTaxDeductibles(tableId=1) Taxation-->>-System: TaxDeductibles System-->>-User: Render Tax Table Page with Tax Deductibles Section Note right of User: Wait for user action User->>+System: Edit TaxDeductible[id=1] System->>+Taxation: viewTaxDeductible(id=1) Taxation-->>-System: TaxDeductible[id=1] System->>+Tag: list() Tag-->>-System: Tags System-->>-User: Render Tax Deductible 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->>+Taxation: editTaxDeductible(id=1) Taxation-->>-System: TaxDeductible[id=1] System->>+Taxation: listTaxDeductibles(tableId=1) Taxation-->>-System: TaxDeductibles System-->>-User: Render Tax Deductibles Section else cancel User->>+System: Cancel System->>+Taxation: listTaxDeductibles(tableId=1) Taxation-->>-System: TaxDeductibles System-->>-User: Render Tax Deductibles Section end
Delete Tax Table
%%{ init: { 'theme': 'base', 'themeVariables': { "primaryColor": "#f4e3d7", "primaryTextColor": "#502d16", "primaryBorderColor": "#784421", "lineColor": "#784421", "secondaryColor": "#a05a2c", "tertiaryColor": "#c87137" } } }%% sequenceDiagram participant User participant System participant Taxation User->>+System: Request Tax Tables Page System->>+Taxation: listTaxTables() Taxation-->>-System: TaxTables System-->>-User: Render Tax Tables Page Note right of User: Wait for user action User->>+System: Delete TaxTable[id=1] System->>+Taxation: viewTaxTable(id=1) Taxation-->>-System: TaxTable[id=1] System-->>-User: Render Tax Table Form Note right of User: Wait for user action alt confirm delete User->>+System: Confirm System->>+Taxation: deleteTaxTable(id=1) Taxation->>Taxation: listTaxDeductibles(tableId=1) Taxation-->>Taxation: TaxDeductibles loop each tax deductible Taxation->>Taxation: deleteTaxDeductible(id=1) Taxation-->>Taxation: success end Taxation->>Taxation: listTaxTiers(tableId=1) Taxation-->>Taxation: TaxTiers loop each tax deductible Taxation->>Taxation: deleteTaxTier(id=1) Taxation-->>Taxation: success end Taxation-->>-System: success System->>+Taxation: listTaxTables() Taxation-->>-System: TaxTables System-->>-User: Render Tax Tables Page else cancel delete User->>+System: Cancel System->>+Taxation: listTaxTables() Taxation-->>-System: TaxTables System-->>-User: Render Tax Tables Page end
Delete Tax Tier
%%{ init: { 'theme': 'base', 'themeVariables': { "primaryColor": "#f4e3d7", "primaryTextColor": "#502d16", "primaryBorderColor": "#784421", "lineColor": "#784421", "secondaryColor": "#a05a2c", "tertiaryColor": "#c87137" } } }%% sequenceDiagram participant User participant System participant Taxation User->>+System: Request Tax Tables Page System->>+Taxation: listTaxTables() Taxation-->>-System: TaxTables System-->>-User: Render Tax Tables Page Note right of User: Wait for user action User->>+System: Delete TaxTiers[id=1] System->>+Taxation: viewTaxTable(id=1) Taxation-->>-System: TaxTable[id=1] System->>+Taxation: listTaxTiers(tableId=1) Taxation-->>-System: TaxTiers System-->>-User: Render Tax Table Page with Tax Tiers Section Note right of User: Wait for user action User->>+System: Delete TaxTier[id=1] System->>+Taxation: viewTaxTier(id=1) Taxation-->>-System: TaxTier[id=1] System-->>-User: Render Tax Tier Form Note right of User: Wait for user action alt confirm delete User->>+System: Confirm System->>+Taxation: deleteTaxTier(id=1) Taxation-->>-System: success System->>+Taxation: listTaxTiers(tableId=1) Taxation-->>-System: TaxTiers System-->>-User: Render Tax Tiers Section else cancel delete User->>+System: Cancel System->>+Taxation: listTaxTiers(tableId=1) Taxation-->>-System: TaxTiers System-->>-User: Render Tax Tiers Section end
Delete Tax Deductible
%%{ init: { 'theme': 'base', 'themeVariables': { "primaryColor": "#f4e3d7", "primaryTextColor": "#502d16", "primaryBorderColor": "#784421", "lineColor": "#784421", "secondaryColor": "#a05a2c", "tertiaryColor": "#c87137" } } }%% sequenceDiagram participant User participant System participant Taxation User->>+System: Request Tax Tables Page System->>+Taxation: listTaxTables() Taxation-->>-System: TaxTables System-->>-User: Render Tax Tables Page Note right of User: Wait for user action User->>+System: Delete TaxDeductibles[id=1] System->>+Taxation: viewTaxTable(id=1) Taxation-->>-System: TaxTable[id=1] System->>+Taxation: listTaxDeductibles(tableId=1) Taxation-->>-System: TaxDeductibles System-->>-User: Render Tax Table Page with Tax Deductibles Section Note right of User: Wait for user action User->>+System: Delete TaxDeductible[id=1] System->>+Taxation: viewTaxDeductible(id=1) Taxation-->>-System: TaxDeductible[id=1] System-->>-User: Render Tax Deductible Form Note right of User: Wait for user action alt confirm delete User->>+System: Confirm System->>+Taxation: deleteTaxDeductible(id=1) Taxation-->>-System: success System->>+Taxation: listTaxDeductibles(tableId=1) Taxation-->>-System: TaxDeductibles System-->>-User: Render Tax Deductibles Section else cancel delete User->>+System: Cancel System->>+Taxation: listTaxDeductibles(tableId=1) Taxation-->>-System: TaxDeductibles System-->>-User: Render Tax Deductibles Section end
Estimate Taxes
%%{ init: { 'theme': 'base', 'themeVariables': { "primaryColor": "#f4e3d7", "primaryTextColor": "#502d16", "primaryBorderColor": "#784421", "lineColor": "#784421", "secondaryColor": "#a05a2c", "tertiaryColor": "#c87137" } } }%% sequenceDiagram participant User participant System participant Taxation User->>+System: Request Tax Tables Page System->>+Taxation: listTaxTables() Taxation-->>-System: TaxTables System-->>-User: Render Tax Tables Page Note right of User: Wait for user action User->>+System: Estimate Taxes[id=1] System->>+Taxation: viewTaxTable(id=1) Taxation-->>-System: TaxTable[id=1] System-->>-User: Render Tax Table Form Note right of User: Wait for user action alt confirm User->>+System: Confirm System->>+Taxation: estimateTaxes(id=1) Taxation-->>-System: TaxTable[id=1] System-->>-User: Render Estimated Taxes Page else cancel User->>+System: Cancel System->>+Taxation: listTaxTables() Taxation-->>-System: TaxTables System-->>-User: Render Tax Tables Page end
Manage Charts
Create Chart
%%{ init: { 'theme': 'base', 'themeVariables': { "primaryColor": "#f4e3d7", "primaryTextColor": "#502d16", "primaryBorderColor": "#784421", "lineColor": "#784421", "secondaryColor": "#a05a2c", "tertiaryColor": "#c87137" } } }%% sequenceDiagram participant User participant System participant Chart participant Tag User->>+System: Request Charts Page System->>+Chart: list() Chart-->>-System: ChartConfigs System-->>-User: Render Charts Page Note right of User: Wait for user action User->>+System: New Chart System->>+Tag: list() Tag-->>-System: Tags System-->>-User: Render Chart 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->>+Chart: create(options) Chart-->>-System: ChartConfig[id=1] System->>+Chart: list() Chart-->>-System: ChartConfigs System-->>-User: Render Charts Page else cancel User->>+System: Cancel System->>+Chart: list() Chart-->>-System: ChartConfigs System-->>-User: Render Charts Page end
Edit Chart
%%{ init: { 'theme': 'base', 'themeVariables': { "primaryColor": "#f4e3d7", "primaryTextColor": "#502d16", "primaryBorderColor": "#784421", "lineColor": "#784421", "secondaryColor": "#a05a2c", "tertiaryColor": "#c87137" } } }%% sequenceDiagram participant User participant System participant Chart participant Tag User->>+System: Request Charts Page System->>+Chart: list() Chart-->>-System: ChartConfigs System-->>-User: Render Charts Page Note right of User: Wait for user action User->>+System: Edit ChartConfig[id=1] System->>+Chart: view(id=1) Chart-->>-System: ChartConfig[id=1] System->>+Tag: list() Tag-->>-System: Tags System-->>-User: Render Chart 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->>+Chart: edit(id=1) Chart-->>-System: ChartConfig[id=1] System->>+Chart: list() Chart-->>-System: ChartConfigs System-->>-User: Render Charts Page else cancel User->>+System: Cancel System->>+Chart: list() Chart-->>-System: ChartConfigs System-->>-User: Render Charts Page end
Delete Chart
%%{ init: { 'theme': 'base', 'themeVariables': { "primaryColor": "#f4e3d7", "primaryTextColor": "#502d16", "primaryBorderColor": "#784421", "lineColor": "#784421", "secondaryColor": "#a05a2c", "tertiaryColor": "#c87137" } } }%% sequenceDiagram participant User participant System participant Chart User->>+System: Request Charts Page System->>+Chart: list() Chart-->>-System: ChartConfigs System-->>-User: Render Charts Page Note right of User: Wait for user action User->>+System: Delete ChartConfig[id=1] System->>+Chart: view(id=1) Chart-->>-System: ChartConfig[id=1] System-->>-User: Render Chart Form Note right of User: Wait for user action alt confirm User->>+System: Confirm System->>+Chart: delete(id=1) Chart-->>-System: success System->>+Chart: list() Chart-->>-System: ChartConfigs System-->>-User: Render Charts Page else cancel User->>+System: Cancel System->>+Chart: list() Chart-->>-System: ChartConfigs System-->>-User: Render Charts Page end
Manage Recurring Tasks
Create Recurring Task
%%{ init: { 'theme': 'base', 'themeVariables': { "primaryColor": "#f4e3d7", "primaryTextColor": "#502d16", "primaryBorderColor": "#784421", "lineColor": "#784421", "secondaryColor": "#a05a2c", "tertiaryColor": "#c87137" } } }%% sequenceDiagram participant User participant System participant RecurringTask User->>+System: Request Recurring Tasks Page System->>+RecurringTask: listTasks() RecurringTask-->>-System: RecurringTasks System-->>-User: Render Recurring Tasks Page Note right of User: Wait for user action User->>+System: New Recurring Task System-->>-User: Render Recurring Task Form Note right of User: Wait for user action alt confirm User->>+System: Input and Confirm System->>+RecurringTask: createTask() RecurringTask-->>-System: RecurringTask[id=1] System-->>-User: Render Recurring Task Page Note right of System: Follow the Create Recurring Task Step sequence else cancel User->>+System: Cancel System->>+RecurringTask: listTasks() RecurringTask-->>-System: RecurringTasks System-->>-User: Render RecurringTasks Page end
Create Recurring Task Step
%%{ init: { 'theme': 'base', 'themeVariables': { "primaryColor": "#f4e3d7", "primaryTextColor": "#502d16", "primaryBorderColor": "#784421", "lineColor": "#784421", "secondaryColor": "#a05a2c", "tertiaryColor": "#c87137" } } }%% sequenceDiagram participant User participant System participant RecurringTask User->>+System: Request Recurring Task Steps Section System->>+RecurringTask: listSteps(taskId) RecurringTask-->>-System: RecurringTaskSteps System-->>-User: Render Recurring Task Steps Section Note right of User: Rendered as a section within Recurring Task Page Note right of User: Wait for user action User->>+System: Add Recurring Task Step System-->>-User: Render Recurring Task Step Form Note right of User: Wait for user action alt confirm User->>+System: Input and Confirm System->>+RecurringTask: createStep() RecurringTask-->>-System: RecurringTaskStep[id=1] System->>+RecurringTask: listSteps(taskId) RecurringTask-->>-System: RecurringTaskSteps System-->>-User: Render Recurring Task Steps Section else cancel User->>+System: Cancel System->>+RecurringTask: listSteps() RecurringTask-->>-System: RecurringTaskSteps System-->>-User: Render Recurring Task Steps Section end
Disable Recurring Task
%%{ init: { 'theme': 'base', 'themeVariables': { "primaryColor": "#f4e3d7", "primaryTextColor": "#502d16", "primaryBorderColor": "#784421", "lineColor": "#784421", "secondaryColor": "#a05a2c", "tertiaryColor": "#c87137" } } }%% sequenceDiagram participant User participant System participant RecurringTask User->>+System: Request Recurring Tasks Section System->>+RecurringTask: listTasks() RecurringTask-->>-System: RecurringTasks System-->>-User: Render Recurring Tasks Page Note right of User: Wait for user action User->>+System: Disable RecurringTask[id=1] System->>+RecurringTask: viewTask(id=1) RecurringTask-->>-System: RecurringTask[id=1] System-->>-User: Render Recurring Task Form Note right of User: Wait for user action alt confirm User->>+System: Confirm System->>+RecurringTask: disableTask(id=1) RecurringTask-->>-System: RecurringTask[id=1] System-->>-User: Render Recurring Task Page else cancel User->>+System: Cancel System->>+RecurringTask: listTasks() RecurringTask-->>-System: RecurringTasks System-->>-User: Render Recurring Tasks Page end
Edit Recurring Task
%%{ init: { 'theme': 'base', 'themeVariables': { "primaryColor": "#f4e3d7", "primaryTextColor": "#502d16", "primaryBorderColor": "#784421", "lineColor": "#784421", "secondaryColor": "#a05a2c", "tertiaryColor": "#c87137" } } }%% sequenceDiagram participant User participant System participant RecurringTask User->>+System: Request Recurring Tasks Section System->>+RecurringTask: listTasks() RecurringTask-->>-System: RecurringTasks System-->>-User: Render Recurring Tasks Page Note right of User: Wait for user action User->>+System: Edit RecurringTask[id=1] System->>+RecurringTask: viewTask(id=1) RecurringTask-->>-System: RecurringTask[id=1] System-->>-User: Render Recurring Task Form Note right of User: Wait for user action alt confirm User->>+System: Confirm System->>+RecurringTask: editTask(id=1) RecurringTask-->>-System: RecurringTask[id=1] System-->>-User: Render Recurring Task Page else cancel User->>+System: Cancel System->>+RecurringTask: listTasks() RecurringTask-->>-System: RecurringTasks System-->>-User: Render Recurring Tasks Page end
End Recurring Task
%%{ init: { 'theme': 'base', 'themeVariables': { "primaryColor": "#f4e3d7", "primaryTextColor": "#502d16", "primaryBorderColor": "#784421", "lineColor": "#784421", "secondaryColor": "#a05a2c", "tertiaryColor": "#c87137" } } }%% sequenceDiagram participant User participant System participant RecurringTask User->>+System: Request Recurring Tasks Section System->>+RecurringTask: listTasks() RecurringTask-->>-System: RecurringTasks System-->>-User: Render Recurring Tasks Page Note right of User: Wait for user action User->>+System: End RecurringTask[id=1] System->>+RecurringTask: viewTask(id=1) RecurringTask-->>-System: RecurringTask[id=1] System-->>-User: Render Recurring Task Form Note right of User: Wait for user action alt confirm User->>+System: Confirm System->>+RecurringTask: endTask(id=1) RecurringTask-->>-System: RecurringTask[id=1] System-->>-User: Render Recurring Task Page else cancel User->>+System: Cancel System->>+RecurringTask: listTasks() RecurringTask-->>-System: RecurringTasks System-->>-User: Render Recurring Tasks Page end
Run Recurring Task
%%{ init: { 'theme': 'base', 'themeVariables': { "primaryColor": "#f4e3d7", "primaryTextColor": "#502d16", "primaryBorderColor": "#784421", "lineColor": "#784421", "secondaryColor": "#a05a2c", "tertiaryColor": "#c87137" } } }%% sequenceDiagram participant User participant System participant RecurringTask User->>+System: Request Recurring Tasks Section System->>+RecurringTask: listTasks() RecurringTask-->>-System: RecurringTasks System-->>-User: Render Recurring Tasks Page Note right of User: Wait for user action User->>+System: Run RecurringTask[id=1] System->>+RecurringTask: viewTask(id=1) RecurringTask-->>-System: RecurringTask[id=1] System-->>-User: Render Recurring Task Form Note right of User: Wait for user action alt confirm User->>+System: Confirm System->>+RecurringTask: runTask(id=1) RecurringTask-->>-System: RecurringTaskRun[id=1] System-->>-User: Render Recurring Task Run Page else cancel User->>+System: Cancel System->>+RecurringTask: listTasks() RecurringTask-->>-System: RecurringTasks System-->>-User: Render Recurring Tasks Page end
Delete Recurring Task
%%{ init: { 'theme': 'base', 'themeVariables': { "primaryColor": "#f4e3d7", "primaryTextColor": "#502d16", "primaryBorderColor": "#784421", "lineColor": "#784421", "secondaryColor": "#a05a2c", "tertiaryColor": "#c87137" } } }%% sequenceDiagram participant User participant System participant RecurringTask User->>+System: Request Recurring Tasks Page System->>+RecurringTask: listTasks() RecurringTask-->>-System: RecurringTasks System-->>-User: Render Recurring Tasks Page Note right of User: Wait for user action alt task in used User->>+System: Delete RecurringTask[id=1] System->>+RecurringTask: taskIsUsed(id=1) RecurringTask-->>-System: true System-->>-User: Abort and Display Error else task not in used User->>+System: Delete RecurringTask[id=1] System->>+RecurringTask: taskIsUsed(id=1) RecurringTask-->>-System: false System->>+RecurringTask: viewTask(id=1) RecurringTask-->>-System: RecurringTask[id=1] System-->>-User: Render Recurring Task Form Note right of User: Wait for user action alt confirm delete User->>+System: Confirm System->>+RecurringTask: deleteTask(id=1) opt steps present RecurringTask->>RecurringTask: listSteps(taskId=1) RecurringTask-->>RecurringTask: RecurringTaskSteps loop each step RecurringTask->>RecurringTask: deleteStep(stepId=1) RecurringTask-->>RecurringTask: success end end RecurringTask-->>-System: success System->>+RecurringTask: listTasks() RecurringTask-->>-System: RecurringTasks System-->>-User: Render Recurring Tasks Page else cancel delete User->>+System: Cancel System->>+RecurringTask: listTasks() RecurringTask-->>-System: RecurringTasks System-->>-User: Render Recurring Tasks Page end end
Delete Recurring Task Step
%%{ init: { 'theme': 'base', 'themeVariables': { "primaryColor": "#f4e3d7", "primaryTextColor": "#502d16", "primaryBorderColor": "#784421", "lineColor": "#784421", "secondaryColor": "#a05a2c", "tertiaryColor": "#c87137" } } }%% sequenceDiagram participant User participant System participant RecurringTask User->>+System: Request Recurring Tasks Page System->>+RecurringTask: listTasks() RecurringTask-->>-System: RecurringTasks System-->>-User: Render Recurring Tasks Page Note right of User: Wait for user action alt task in use User->>+System: Delete RecurringTaskSteps[id=1] System->>+RecurringTask: taskIsUsed(id=1) RecurringTask-->>-System: true System-->>-User: Abort and Display Error else task not in use User->>+System: Delete RecurringTaskSteps[id=1] System->>+RecurringTask: taskIsUsed(id=1) RecurringTask-->>-System: false System->>+RecurringTask: viewRecurringTask(id=1) RecurringTask-->>-System: RecurringTask[id=1] System->>+RecurringTask: listSteps(taskId=1) RecurringTask-->>-System: RecurringTaskSteps System-->>-User: Render Recurring Task Page with Recurring Task Steps Section Note right of User: Wait for user action User->>+System: Delete RecurringTaskStep[id=1] System->>+RecurringTask: viewRecurringTaskStep(id=1) RecurringTask-->>-System: RecurringTaskStep[id=1] System-->>-User: Render Recurring Task Step Form Note right of User: Wait for user action alt confirm delete User->>+System: Confirm System->>+RecurringTask: deleteStep(id=1) RecurringTask-->>-System: success System->>+RecurringTask: listSteps(taskId=1) RecurringTask-->>-System: RecurringTaskSteps System-->>-User: Render Recurring Task Steps Section else cancel delete User->>+System: Cancel System->>+RecurringTask: listSteps(taskId=1) RecurringTask-->>-System: RecurringTaskSteps System-->>-User: Render Recurring Task Steps Section end end
Manage System Configs
Edit System Config
%%{ init: { 'theme': 'base', 'themeVariables': { "primaryColor": "#f4e3d7", "primaryTextColor": "#502d16", "primaryBorderColor": "#784421", "lineColor": "#784421", "secondaryColor": "#a05a2c", "tertiaryColor": "#c87137" } } }%% sequenceDiagram participant User participant System participant SystemConfig User->>+System: Request System Configs Page System->>+SystemConfig: list() SystemConfig-->>-System: SystemConfigs System-->>-User: Render System Configs Page Note right of User: Wait for user action User->>+System: Edit System Config System->>+SystemConfig: viewLatest() SystemConfig-->>-System: SystemConfig[id=n] System-->>-User: Render System Config Form Note right of User: Wait for user action alt confirm User->>+System: Input and Confirm System->>+SystemConfig: create() SystemConfig->>SystemConfig: deactivate(id=n, effectiveEnd=now()) SystemConfig-->>SystemConfig: SystemConfig[id=n] SystemConfig->>SystemConfig: view(id=n+1) SystemConfig-->>-System: SystemConfig[id=n+1] System-->>-User: Render System Config Page else cancel User->>+System: Cancel System->>+SystemConfig: list() SystemConfig-->>-System: SystemConfigs System-->>-User: Render System Configs Page end
Manage Users
Create User
%%{ init: { 'theme': 'base', 'themeVariables': { "primaryColor": "#f4e3d7", "primaryTextColor": "#502d16", "primaryBorderColor": "#784421", "lineColor": "#784421", "secondaryColor": "#a05a2c", "tertiaryColor": "#c87137" } } }%% sequenceDiagram participant User participant System participant UserProfile User->>+System: Launch App System-->>-User: Render Login Page Note right of User: Wait for user action User->>+System: New User System-->>-User: Render User Form Note right of User: Wait for user action alt confirm User->>+System: Input Credentials and Confirm System->>+UserProfile: create(credentials) UserProfile-->>-System: User[id=1] System->>+User: Render App else cancel User->>+System: Cancel System-->>-User: Render Login Page end
Login User
%%{ init: { 'theme': 'base', 'themeVariables': { "primaryColor": "#f4e3d7", "primaryTextColor": "#502d16", "primaryBorderColor": "#784421", "lineColor": "#784421", "secondaryColor": "#a05a2c", "tertiaryColor": "#c87137" } } }%% sequenceDiagram participant User participant System participant UserProfile User->>+System: Launch App System-->>-User: Render Login Page Note right of User: Wait for user action alt confirm alt valid credentials User->>+System: Input Credentials and Confirm System->>+UserProfile: authenticate(credentials) UserProfile-->>-System: User[id=1] System->>+User: Render App else invalid credentials User->>+System: Input Credentials and Confirm System->>+UserProfile: authenticate(credentials) UserProfile-->>-System: null System->>+User: Abort and Display Error end else cancel User->>+System: Cancel System-->>-User: Render Login Page end
Edit Profile
%%{ init: { 'theme': 'base', 'themeVariables': { "primaryColor": "#f4e3d7", "primaryTextColor": "#502d16", "primaryBorderColor": "#784421", "lineColor": "#784421", "secondaryColor": "#a05a2c", "tertiaryColor": "#c87137" } } }%% sequenceDiagram participant User participant System participant UserProfile User->>+System: Request Profile Page System->>+UserProfile: view(id=1) UserProfile-->>-System: User[id=1] System-->>-User: Render Profile Page Note right of User: Wait for user action User->>+System: Edit Profile[id=1] System-->>-User: Render Profile Form Note right of User: Wait for user action alt confirm User->>+System: Input and Confirm System->>+UserProfile: edit(id=1) UserProfile-->>-System: User[id=1] System->>+User: Render Profile Page else cancel User->>+System: Cancel System-->>-User: Render Profile Page end
That’s A Wrap
Finally, we have created the sequence diagrams corresponding to the user journeys of the app. The purpose of this exercise is to understand the interactions between various system components, so that we can better understand what functions are required for each component.
In the process of writing the sequence diagrams, I also discovered a few missing user journeys and made a few amendments to the journeys to streamline the processes. I also refined the system components and added a few functions and remove some others. Again, this is not uncommon, as we might not have known every detail at the outset.
With the system components and sequence diagrams ready, let’s move on to designing the system architecture!