Dynamic views

Dynamic view describes a particular use-case or scenario, with specific elements and interactions, defined only in the view (without polluting the model).

Dynamic view definition


53 collapsed lines
1
specification {
2
  element actor {
3
    style {
4
      shape person
5
    }
6
  }
7
  element system
8
  element component
9
}
10

11
model {
12
  customer = actor 'Customer' {
13
    description 'Customer of Cloud System'
14
  }
15

16
  cloud = system 'Cloud System' {
17
    backend = component 'Backend' {
18
      description 'Backend services and API'
19

20
      auth = component 'Authentication'
21

22
      api = component 'Backend API' {
23
        description 'RESTful API'
24
      }
25

26
      api -> auth 'validates bearer token'
27
    }
28

29
    ui = component 'Frontend' {
30
      description '
31
        All the frontend applications
32
        of Cloud System
33
      '
34
      style {
35
        shape browser
36
      }
37

38
      web = component 'Customer Dashboard' {
39
        description 'React Application'
40
        style {
41
          shape browser
42
        }
43
      }
44

45
      web -> auth
46
      web -> api 'requests'
47
    }
48
  }
49

50
  customer -> web 'opens in browser'
51

52
}
53

54
views {
55
  dynamic view example {
56
    title 'Dynamic View Example'
57
    customer -> web 'opens in browser'
58
    web -> auth 'updates bearer token if needed'
59
    web -> api 'POST request'
60
    api -> auth // title is derived from the model
61
    api -> api 'process request' // allow self-call
62

63
    // reverse direction, as a response to line 59
64
    web <- api 'returns JSON'
65

66
    // Include elements, that are not participating
67
    include cloud, ui, backend
68

69
    style cloud {
70
      color muted
71
      opacity 0%
72
    }
73
    style ui, backend {
74
      opacity 0%
75
    }
76
  }
77
}