System Components Design

We take care to design the system components so that the system is structurally sound.

gohkhoonhiang
Apr 26, 2023 | 6 mins read

System Components Design

After we have designed the user journey, we can proceed to design the system processes.

But before that, let’s take stock of the various components available in the system, because the sequence diagrams will not make sense if we don’t know what are the components that will interact with each other. We also want to list down what are the various actions available on each component, so that later on we will have the verbs to describe the interactions between components.

For convenience, we will use Class Diagram syntax to illustrate the various components, but we need to be aware that not all components correspond exactly to a class each. For example, Invoicing is a relatively complex component that consists of multiple models, which loosely translate to a class each.

WorkLog

%%{
  init: {
    'theme': 'base',
    'themeVariables': {
  "primaryColor": "#f4e3d7",
  "primaryTextColor": "#502d16",
  "primaryBorderColor": "#784421",
  "lineColor": "#784421",
  "secondaryColor": "#a05a2c",
  "tertiaryColor": "#c87137"
}
  }
}%%

classDiagram
    class WorkLog
    WorkLog: +list(filters)
    WorkLog: +view(id)
    WorkLog: +create()
    WorkLog: +edit(id)
    WorkLog: +delete(id)
    WorkLog: +isUsed(id)

WorkLog Component.

Tag

%%{
  init: {
    'theme': 'base',
    'themeVariables': {
  "primaryColor": "#f4e3d7",
  "primaryTextColor": "#502d16",
  "primaryBorderColor": "#784421",
  "lineColor": "#784421",
  "secondaryColor": "#a05a2c",
  "tertiaryColor": "#c87137"
}
  }
}%%

classDiagram
    class Tag
    Tag: +list()
    Tag: +view(id)
    Tag: +create()
    Tag: +createIfNotExists()
    Tag: +edit(id)
    Tag: +delete(id)
    Tag: +isUsed(id)

Tag Component.

Contact

%%{
  init: {
    'theme': 'base',
    'themeVariables': {
  "primaryColor": "#f4e3d7",
  "primaryTextColor": "#502d16",
  "primaryBorderColor": "#784421",
  "lineColor": "#784421",
  "secondaryColor": "#a05a2c",
  "tertiaryColor": "#c87137"
}
  }
}%%

classDiagram
    class Contact
    Contact: +list()
    Contact: +view(id)
    Contact: +create()
    Contact: +edit(id)
    Contact: +delete(id)
    Contact: +isUsed(id)

Contact Component.

Currency

%%{
  init: {
    'theme': 'base',
    'themeVariables': {
  "primaryColor": "#f4e3d7",
  "primaryTextColor": "#502d16",
  "primaryBorderColor": "#784421",
  "lineColor": "#784421",
  "secondaryColor": "#a05a2c",
  "tertiaryColor": "#c87137"
}
  }
}%%

classDiagram
    class Currency
    Currency: +list()
    Currency: +view(id)
    Currency: +create()
    Currency: +edit(id)
    Currency: +delete(id)
    Currency: +isUsed(id)

Currency Component.

Transaction

%%{
  init: {
    'theme': 'base',
    'themeVariables': {
  "primaryColor": "#f4e3d7",
  "primaryTextColor": "#502d16",
  "primaryBorderColor": "#784421",
  "lineColor": "#784421",
  "secondaryColor": "#a05a2c",
  "tertiaryColor": "#c87137"
}
  }
}%%

classDiagram
    class Transaction
    Transaction: +list()
    Transaction: +view(id)
    Transaction: +create(type, associated_id)
    Transaction: +edit(id)
    Transaction: +delete(id)
    Transaction: +isUsed(id)

Transaction Component.

Template

%%{
  init: {
    'theme': 'base',
    'themeVariables': {
  "primaryColor": "#f4e3d7",
  "primaryTextColor": "#502d16",
  "primaryBorderColor": "#784421",
  "lineColor": "#784421",
  "secondaryColor": "#a05a2c",
  "tertiaryColor": "#c87137"
}
  }
}%%

classDiagram
    class Template
    Template: +list(types)
    Template: +view(id)
    Template: +create()
    Template: +edit(id)
    Template: +delete(id)
    Template: +isUsed(id)

Template Component.

Sequence

%%{
  init: {
    'theme': 'base',
    'themeVariables': {
  "primaryColor": "#f4e3d7",
  "primaryTextColor": "#502d16",
  "primaryBorderColor": "#784421",
  "lineColor": "#784421",
  "secondaryColor": "#a05a2c",
  "tertiaryColor": "#c87137"
}
  }
}%%

classDiagram
    class Sequence
    Sequence: +list()
    Sequence: +view(id)
    Sequence: +create()
    Sequence: +delete(id)
    Sequence: +isUsed(id)

Sequence Component.

Invoicing

%%{
  init: {
    'theme': 'base',
    'themeVariables': {
  "primaryColor": "#f4e3d7",
  "primaryTextColor": "#502d16",
  "primaryBorderColor": "#784421",
  "lineColor": "#784421",
  "secondaryColor": "#a05a2c",
  "tertiaryColor": "#c87137"
}
  }
}%%

classDiagram
    class Invoicing
    Invoicing: +listConfigs()
    Invoicing: +viewConfig(configId)
    Invoicing: +createConfig()
    Invoicing: +editConfig(configId)
    Invoicing: +deleteConfig(configId)
    Invoicing: +configIsUsed(configId)

    Invoicing: +listInvoices()
    Invoicing: +viewInvoice(invoiceId)
    Invoicing: +previewInvoice(options, workLogs, invoiceLines)
    Invoicing: +generateInvoiceFromPreview(tempId)
    Invoicing: +generateInvoice(options, workLogs, invoiceLines)
    Invoicing: +editInvoice(invoiceId)
    Invoicing: +voidInvoice(invoiceId)

Invoicing Component.

Billing

%%{
  init: {
    'theme': 'base',
    'themeVariables': {
  "primaryColor": "#f4e3d7",
  "primaryTextColor": "#502d16",
  "primaryBorderColor": "#784421",
  "lineColor": "#784421",
  "secondaryColor": "#a05a2c",
  "tertiaryColor": "#c87137"
}
  }
}%%

classDiagram
    class Billing
    Billing: +listConfigs()
    Billing: +viewConfig(id)
    Billing: +createConfig(id)
    Billing: +editConfig(id)
    Billing: +deleteConfig(id)
    Billing: +isUsed(id)

Billing Component.

Receipt

%%{
  init: {
    'theme': 'base',
    'themeVariables': {
  "primaryColor": "#f4e3d7",
  "primaryTextColor": "#502d16",
  "primaryBorderColor": "#784421",
  "lineColor": "#784421",
  "secondaryColor": "#a05a2c",
  "tertiaryColor": "#c87137"
}
  }
}%%

classDiagram
    class Receipt
    Receipt: +listConfigs()
    Receipt: +viewConfig(configId)
    Receipt: +createConfig()
    Receipt: +editConfig(configId)
    Receipt: +deleteConfig(configId)
    Receipt: +configIsUsed(configId)

    Receipt: +listIncomeReceipts()
    Receipt: +viewIncomeReceipt(receiptId)
    Receipt: +previewIncomeReceipt(invoiceId, options)
    Receipt: +generateIncomeReceiptFromPreview(tempId)
    Receipt: +generateIncomeReceipt(invoiceId, options)
    Receipt: +editIncomeReceipt(receiptId)
    Receipt: +voidIncomeReceipt(receiptId)
    Receipt: +uploadIncomeReceipt()
    Receipt: +deleteUploadedIncomeReceipt(id)

    Receipt: +listExpenseReceipts()
    Receipt: +viewExpenseReceipt(receiptId)
    Receipt: +uploadExpenseReceipt()
    Receipt: +deleteUploadedExpenseReceipt(id)

Receipt Component.

Document

%%{
  init: {
    'theme': 'base',
    'themeVariables': {
  "primaryColor": "#f4e3d7",
  "primaryTextColor": "#502d16",
  "primaryBorderColor": "#784421",
  "lineColor": "#784421",
  "secondaryColor": "#a05a2c",
  "tertiaryColor": "#c87137"
}
  }
}%%

classDiagram
    class Document
    Document: +list()
    Document: +view(id)
    Document: +create()
    Document: +tag(id, tags)
    Document: +delete(id)
    Document: +download(filters)

Document Component.

Taxation

%%{
  init: {
    'theme': 'base',
    'themeVariables': {
  "primaryColor": "#f4e3d7",
  "primaryTextColor": "#502d16",
  "primaryBorderColor": "#784421",
  "lineColor": "#784421",
  "secondaryColor": "#a05a2c",
  "tertiaryColor": "#c87137"
}
  }
}%%

classDiagram
    class Taxation
    Taxation: +listTaxTables()
    Taxation: +viewTaxTable(tableId)
    Taxation: +createTaxTable()
    Taxation: +editTaxTable(tableId)
    Taxation: +deleteTaxTable(tableId)

    Taxation: +listTaxTiers(tableId)
    Taxation: +viewTaxTier(tierId)
    Taxation: +createTaxTier()
    Taxation: +editTaxTier(tierId)
    Taxation: +deleteTaxTier(tierId)

    Taxation: +listTaxDeductibles()
    Taxation: +viewTaxDeductible(deductibleId)
    Taxation: +createTaxDeductible()
    Taxation: +editTaxDeductible(deductibleId)
    Taxation: +deleteTaxDeductible(deductibleId)

    Taxation: +estimateTaxes(tableId)

Taxation Component.

Chart

%%{
  init: {
    'theme': 'base',
    'themeVariables': {
  "primaryColor": "#f4e3d7",
  "primaryTextColor": "#502d16",
  "primaryBorderColor": "#784421",
  "lineColor": "#784421",
  "secondaryColor": "#a05a2c",
  "tertiaryColor": "#c87137"
}
  }
}%%

classDiagram
    class Chart
    Chart: +list()
    Chart: +view(id)
    Chart: +create(options)
    Chart: +edit(id)
    Chart: +delete(id)

Chart Component.

RecurringTask

%%{
  init: {
    'theme': 'base',
    'themeVariables': {
  "primaryColor": "#f4e3d7",
  "primaryTextColor": "#502d16",
  "primaryBorderColor": "#784421",
  "lineColor": "#784421",
  "secondaryColor": "#a05a2c",
  "tertiaryColor": "#c87137"
}
  }
}%%

classDiagram
    class RecurringTask
    RecurringTask: +listTasks()
    RecurringTask: +viewTask(taskId)
    RecurringTask: +createTask()
    RecurringTask: +editTask(taskId)
    RecurringTask: +deleteTask(taskId)
    RecurringTask: +disableTask(taskId)
    RecurringTask: +endTask(taskId)
    RecurringTask: +runTask(taskId)
    RecurringTask: +taskIsUsed(taskId)

    RecurringTask: +listSteps()
    RecurringTask: +viewStep(stepId)
    RecurringTask: +createStep()
    RecurringTask: +editStep(stepId)
    RecurringTask: +deleteStep(stepId)
    RecurringTask: +stepIsUsed(taskId)

    RecurringTask: +listTaskRuns()
    RecurringTask: +viewTaskRun(runId)
    RecurringTask: +listStepRuns()
    RecurringTask: +viewStepRun(stepRunId)

RecurringTask Component.

SystemConfig

%%{
  init: {
    'theme': 'base',
    'themeVariables': {
  "primaryColor": "#f4e3d7",
  "primaryTextColor": "#502d16",
  "primaryBorderColor": "#784421",
  "lineColor": "#784421",
  "secondaryColor": "#a05a2c",
  "tertiaryColor": "#c87137"
}
  }
}%%

classDiagram
    class SystemConfig
    SystemConfig: +list()
    SystemConfig: +view(id)
    SystemConfig: +viewLatest()
    SystemConfig: +create()
    SystemConfig: +deactivate(id, effectiveEnd)

SystemConfig Component.

UserProfile

%%{
  init: {
    'theme': 'base',
    'themeVariables': {
  "primaryColor": "#f4e3d7",
  "primaryTextColor": "#502d16",
  "primaryBorderColor": "#784421",
  "lineColor": "#784421",
  "secondaryColor": "#a05a2c",
  "tertiaryColor": "#c87137"
}
  }
}%%

classDiagram
    class User
    User: +view(id)
    User: +create(credentials)
    User: +authenticate(credentials)
    User: +edit(id)

User Component.

We’re Ready

Now that we have the system components in order, we can move on to design the sequence diagrams using these components and their functions. Note that these component functions are what we have identified as the actions available based on the user journey, it is possible that more functions are required behind the scene that the user will not see. In such situations, we just simply revisit the components and add to their functionalities accordingly.

Credits:

Related Articles: