LikeC4 for Cursor

Diagrams bridge abstract structure and concrete code, enabling humans to visualize complexity while providing LLMs structured data for analysis. LikeC4 surpasses UML (overly technical), Mermaid (limited semantics), C4 (rigid hierarchy), and D2 (ambiguous syntax) with balanced readability/machine-parsability through contextual auto-layouts, semantic relationships, and AI-optimized schema inheritance.

LikeC4 Viewer for VSCode(available in Cursor)

Prompt example adding to context: elements.likec4, colors.likec4 and relationships.likec4:

Lets create a LikeC4 diagram strictly following likec4-codestyle for code validation and examples in likec4-reference as reference when needed, we want to use our existing elements, colors and relationships or create new ones if needed, diagram should have a central point with expanding relationships like a mind map to help understand this concept: AR-software for sunglasses that undress or dress choosen subjects

One-shot in agent mode with Claude after 4 lint errors(duplicate tags), requires around 4-6 iterations with Deepseek R1 in normal mode, in case you need to debug further, add LikeC4 Documentation and tag @likec4 asking to look into.
Currently LikeC4 vscode extension shares all files elements with each other and is subject to change.

Here's the xml ruleset in mdc format, two files:

.cursor/rules/likec4_codestyle.mdc:

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
---
description: Specifications when writing LIKEC4 files.
globs: *.likec4
---
Priority: High
Instruction: MUST follow these specifications when writing LIKEC4 files:

<?xml version="1.0" encoding="UTF-8"?>
<LikeC4Specification xmlns="https://likec4.dev/ns"
                    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
                    xsi:schemaLocation="https://likec4.dev/ns likec4-spec.xsd"
                    version="2024.1" coreVersion="2.4">

  <WorkspaceRules id="workspace-rules">
    <FileOrganization id="file-org">
      <DirectoryTree>
        project/
          specs/
            elements.likec4
            relationships.likec4
          model/
            core/
              auth-system.likec4
            infrastructure/
              aws.likec4
          views/
            security-views.likec4
      </DirectoryTree>
      <ExtensionBoundaries>
        <Rule id="implicit-coupling" severity="error">
          <Description>Workspace files share implicit namespace</Description>
          <Validation xpath="count(//specification//extend)=0"/>
        </Rule>
      </ExtensionBoundaries>
    </FileOrganization>

    <NamingConventions id="naming-rules">
      <GlobalNamespacing>
        <Rule id="fqn-format" xpath="matches(@name,'^[A-Z][a-z]+(\.[A-Z][a-z]+)*$')"/>
        <Rule id="instance-suffix" xpath="ends-with(@name,'_instance')"/>
      </GlobalNamespacing>
    </NamingConventions>
  </WorkspaceRules>

  <CoreElements id="core-elements">
    <ElementKinds>
      <!-- Core element types from official spec -->
      <element name="actor" abstract="false">
        <description>Human or organizational entity interacting with the system</description>
        <style shape="person" color="primary"/>
        <nesting maxDepth="0"/>
      </element>

      <element name="system" container="true">
        <description>Top-level technological system</description>
        <style shape="rectangle" color="secondary"/>
        <nesting maxDepth="3"/>
      </element>

      <element name="component" container="false">
        <description>Reusable architectural component</description>
        <style shape="rectangle" color="tertiary" border="solid"/>
        <relationships>
          <relationship type="uses" technology="REST,GraphQL"/>
        </relationships>
      </element>

      <element name="external-system">
        <description>Third-party system outside organizational control</description>
        <style shape="cylinder" color="muted" border="dashed"/>
        <properties>
          <property name="version" required="true"/>
          <property name="protocol" required="false"/>
        </properties>
      </element>

      <!-- Relationship types from official spec -->
      <relationship name="uses">
        <description>Default interaction between components</description>
        <style line="solid" head="normal"/>
      </relationship>

      <relationship name="async">
        <description>Asynchronous message-based communication</description>
        <style line="dashed" head="open"/>
        <properties>
          <property name="delivery-guarantee" values="at-least-once,exactly-once"/>
        </properties>
      </relationship>
    </ElementKinds>
  </CoreElements>

  <ValidationFramework id="validation-rules">
    <DynamicRules>
      <AutoDiscovery pattern="//Rule[not(@reference)]">
        <Template>
          <Rule name="{local-name()}_auto" priority="medium">
            <Definition>Autogenerated rule for {local-name()} validation</Definition>
            <Reference source="https://likec4.dev/dsl/specification/"/>
            <Validation xpath="{@xpath}"/>
          </Rule>
        </Template>
      </AutoDiscovery>
      <AutoDiscovery pattern="//Element[contains(@technology,'AWS')]">
        <Template>
          <Rule name="aws-resource-{position()}" priority="medium">
            <Definition>Auto-discovered AWS resource validation</Definition>
            <Validation xpath="exists(@arn) and exists(@region)"/>
            <Reference source="https://likec4.dev/dsl/deployment/model/"/>
          </Rule>
        </Template>
      </AutoDiscovery>
    </DynamicRules>

    <StructuralValidation>
      <Rule id="fqn-resolution" xpath="//Element[contains(@name,'.')]" severity="error">
        <Description>FQN must resolve to existing parent elements</Description>
        <Validation xpath="every $part in tokenize(@name,'\.') satisfies exists(//Element[@name=$part])"/>
        <Reference source="https://likec4.dev/dsl/references/#fully-qualified-names"/>
      </Rule>

      <Rule id="relationship-placement" severity="error">
        <Description>Relationships must be defined in model section</Description>
        <Validation xpath="count(//views//Relationship)=0"/>
        <Reference source="https://likec4.dev/dsl/model/#relationships"/>
      </Rule>

      <Rule id="element-type-match" xpath="//Element[not(@kind = $specification/element/@name)]" severity="error">
        <Description>Element types must match specification</Description>
        <Validation xpath="exists($specification/element[@name=current()/@kind])"/>
        <Reference source="https://likec4.dev/dsl/specification/#element-kind"/>
      </Rule>

      <Rule id="relationship-tech-required" xpath="//Relationship[not(@technology)]" severity="error">
        <Description>Technology must be specified for relationships</Description>
        <Validation xpath="exists(//RelationshipType[@name=current()/@type]/@technology)"/>
      </Rule>

      <Rule id="view-scope-validation" xpath="//View[not(contains(@of, '.'))]">
        <Description>Non-dynamic views must specify scope with FQN</Description>
        <Validation xpath="
          (not(@type = 'dynamic') and matches(@of, '^[A-Za-z]+(\.[A-Za-z]+)*$')) or
          @type = 'dynamic'
        "/>
        <Reference source="https://likec4.dev/dsl/views/#view-definition"/>
      </Rule>

      <Rule id="element-uniqueness" severity="error">
        <Description>Element types must be uniquely defined across workspace</Description>
        <Validation xpath="
          count(
            //element[
              @name = preceding::element/@name 
              or document('elements.likec4')//element/@name
            ]
          ) = 0
        "/>
        <Reference source="https://likec4.dev/dsl/specification/#element-kind"/>
      </Rule>

      <Rule id="element-instantiation" severity="error">
        <Description>Elements must use assignment syntax: [identifier] = [elementType] '[title]'</Description>
        <Validation xpath="
          every $e in //Element satisfies
            matches($e/@name, '^\w+\s*=\s*\w+\s+''[\w\s]+''')"
        />
        <Reference source="https://likec4.dev/dsl/model/#element-definitions"/>
      </Rule>

      <Rule id="title-requirement" severity="error">
        <Description>All elements must have explicit string literal titles</Description>
        <Validation xpath="every $e in //Element satisfies exists($e/@title)"/>
      </Rule>

      <Rule id="tag-declaration" severity="error">
        <Description>Tags must be declared in specification and used as annotations</Description>
        <Validation xpath="
          every $tag in //Element//text()[contains(.,'#')]
            satisfies exists($specification/tag[@name=substring-after($tag,'#')])
        "/>
        <Reference source="https://likec4.dev/dsl/model/#tags"/>
      </Rule>

      <Rule id="tag-placement" severity="error">
        <Description>Tags must be placed at the beginning of element blocks, before any other properties</Description>
        <Validation xpath="
          every $e in //Element
          satisfies (
            empty($e/*[1][not(starts-with(text(), '#'))]) or
            count($e//text()[starts-with(.,'#')]) = 0
          )
        "/>
      </Rule>

      <Rule id="valid-shapes" severity="error">
        <Description>Shapes must be from official allowed list</Description>
        <Validation xpath="
          every $shape in //style/@shape
          satisfies $shape = ('rectangle','person','browser','mobile','cylinder','storage','queue')
        "/>
        <Reference source="https://likec4.dev/dsl/styling/#shape"/>
      </Rule>

      <Rule id="valid-colors" severity="error">
        <Description>Colors must use official names or custom definitions</Description>
        <Validation xpath="
          every $color in //style/@color
          satisfies (
            $color = ('primary','secondary','muted','amber','gray','green','indigo','red') or
            exists($specification/color[@name=$color])
          )
        "/>
        <Reference source="https://likec4.dev/dsl/styling/#color"/>
      </Rule>

      <Rule id="relationship-tag-order" severity="error">
        <Description>Relationship tags must precede other properties</Description>
        <Validation xpath="
          every $rel in //Relationship
          satisfies (
            empty($rel/*[1][not(starts-with(text(), '#'))]) or
            count($rel//text()[starts-with(.,'#')]) = 0
          )
        "/>
        <Reference source="https://likec4.dev/dsl/model/#relationships"/>
      </Rule>

      <Rule id="kind-style-inheritance" severity="info">
        <Description>Elements inherit styles from their kind definition</Description>
        <Validation xpath="
          every $e in //model//Element
          satisfies (
            not($e/style/@shape) or 
            $e/@kind = //specification/element[style/@shape]/@name
          )
        "/>
        <Reference source="https://likec4.dev/dsl/specification/#element-kind"/>
      </Rule>

      <Rule id="parent-child-relationships" severity="error">
        <Description>Relationships between parent and child elements are implicit through containment</Description>
        <Validation xpath="
          every $rel in //Relationship satisfies (
            not(//Element[contains(child::Element/@name, $rel/@target)]/@name = $rel/@source) and
            not(//Element[contains(child::Element/@name, $rel/@source)]/@name = $rel/@target)
          )
        "/>
        <Reference source="https://likec4.dev/dsl/model/#containment"/>
      </Rule>

      <Rule id="exclude-pattern-requirement" severity="error">
        <Description>Exclude directives must target specific patterns, not wildcards</Description>
        <Validation xpath="
          count(//exclude[@value='*' and not(@pattern)]) = 0
        "/>
        <Reference source="https://likec4.dev/dsl/views/#exclude-directive"/>
        <Example>
          // Valid
          exclude internal_*
          exclude *test

          // Invalid
          exclude *
        </Example>
      </Rule>

    </StructuralValidation>

    <NamingConventions>
      <Rule id="fqn-pattern" xpath="//Element[not(matches(@name, '^[A-Z][a-zA-Z0-9]+$'))]"/>
      <Rule id="relationship-verbs" xpath="//Relationship[not(@type = $specification/relationship/@name)]"/>
      <Rule id="view-naming" xpath="//View[not(matches(@title,'^[A-Z][a-z]+(\s[A-Z][a-z]+)*$'))]" severity="warning">
        <Description>View titles should use Title Case</Description>
        <Reference source="https://likec4.dev/dsl/views/#view-definition"/>
      </Rule>
      <Rule id="exclude-pattern-format" severity="warning">
        <Description>Exclude patterns should use wildcard suffixes</Description>
        <Validation xpath="
          every $excl in //exclude/@pattern
          satisfies matches($excl, '^\*?[a-z_-]+\*?$')
        "/>
      </Rule>
    </NamingConventions>

    <Rule id="repository-contents"
          xpath="//Element[@kind='repository' and not(parent::Element[@kind='repositories'])]"
          severity="error">
      <Description>Repositories must be nested under repositories container</Description>
    </Rule>

    <Rule id="element-description" 
          xpath="//element[not(description)]" 
          severity="error">
      <Description>All elements must have descriptions</Description>
      <Reference source="https://likec4.dev/dsl/specification/#element-kind"/>
    </Rule>

    <Rule id="relationship-properties"
          xpath="//relationship/properties[not(@name=parent::relationship/property/@name)]"
          severity="warning">
      <Description>Relationship properties must be declared</Description>
    </Rule>

    <Rule id="metadata-properties" severity="info">
      <Description>Custom properties must be in metadata blocks</Description>
      <Validation xpath="
        every $prop in //@*[name() != 'title' and name() != 'technology' and name() != 'description']
        satisfies exists(ancestor::metadata)
      "/>
    </Rule>

    <Rule id="view-style-targets" severity="error">
      <Description>View styles must target element IDs or tags</Description>
      <Validation xpath="
        every $target in //view/style/@target
        satisfies (
          $target = //model//Element/@name or
          starts-with($target, '#')
        )
      "/>
    </Rule>

    <Rule id="valid-borders" severity="error">
      <Description>Border styles must be valid</Description>
      <Description>Prohibits CSS-style values like 'bold', 'thin', 'thick'</Description>
      <Validation xpath="
        every $border in //style/@border-style
        satisfies $border = ('solid','dashed','dotted','none')
      "/>
      <Validation xpath="
        count(//style/@*[name() = 'border-width']) = 0
      "/>
    </Rule>

    <Rule id="notation-context" severity="error">
      <Description>Notations must be in element/style/with blocks</Description>
      <Validation xpath="
        every $n in //notation
        satisfies (
          exists(ancestor::element) or
          exists(ancestor::style) or
          exists(ancestor::with)
        )
      "/>
    </Rule>

    <Rule id="style-properties" severity="error">
      <Description>Validate allowed style properties</Description>
      <Description>Prevents CSS-inspired properties like border-width/margin/padding</Description>
      <Validation xpath="
        every $prop in //style/@*
        satisfies $prop/name() = (
          'shape','color','border',
          'opacity','multiple'
        )
      "/>
    </Rule>

    <Rule id="relationship-arrow-types" severity="error">
      <Validation xpath="
        every $h in //style/@head satisfies $h = (
          'none','normal','onormal','dot','odot',
          'diamond','odiamond','crow','open','vee'
        )
      "/>
    </Rule>

    <Rule id="element-specification-syntax" severity="error">
      <Validation xpath="
        every $rel in //specification/relationship
        satisfies exists($rel/notation)
      "/>
    </Rule>

    <Rule id="relationship-specification-syntax" severity="error">
      <Validation xpath="
        every $rel in //specification/relationship
        satisfies exists($rel/notation)
      "/>
    </Rule>

    <Rule id="relationship-style-syntax" severity="error">
      <Validation xpath="every $rel in //specification/relationship satisfies count($rel/style) = 0"/>
    </Rule>

    <Rule id="style-predicate-requirement" severity="error">
      <Description>View style blocks must contain at least one valid predicate</Description>
      <Validation xpath="
        every $style in //view/style
        satisfies (
          exists($style/*[self::* or starts-with(name(), 'element')])
        )
      "/>
      <Reference source="https://likec4.dev/dsl/styling/#style-predicates"/>
    </Rule>

    <Rule id="view-layout-syntax" severity="error">
      <Description>Use autoLayout instead of layout blocks</Description>
      <Validation xpath="count(//view/layout) = 0"/>
      <Reference source="https://likec4.dev/dsl/views/#layout"/>
    </Rule>

    <Rule id="autolayout-params" severity="error">
      <Description>autoLayout requires direction and optional distances</Description>
      <Validation xpath="
        every $al in //view/autoLayout
        satisfies (
          matches(@direction, '^(TopBottom|BottomTop|LeftRight|RightLeft)$') and
          (not(@rank-distance) or number(@rank-distance) > 0) and
          (not(@node-distance) or number(@node-distance) > 0)
        )
      "/>
    </Rule>

    <Rule id="view-include-order" severity="error">
      <Description>Include statements must come first in view definitions</Description>
      <Validation xpath="
        every $view in //view satisfies (
          empty($view/*[not(self::include)][preceding-sibling::include]) and
          empty($view/style[preceding-sibling::exclude])
        )
      "/>
      <Reference source="https://likec4.dev/dsl/views/#view-structure"/>
    </Rule>

    <Rule id="dynamic-view-content" severity="error">
      <Description>Dynamic views must contain interaction definitions</Description>
      <Validation xpath="
        every $dv in //view[@type='dynamic'] satisfies (
          exists($dv/Relationship) or
          exists($dv/parallel) or
          exists($dv/par)
        )
      "/>
      <Reference source="https://likec4.dev/dsl/dynamic-views/"/>
    </Rule>

    <Rule id="valid-line-styles" severity="error">
      <Description>Line styles must be valid</Description>
      <Validation xpath="
        every $line in //@line
        satisfies $line = ('solid','dashed','dotted')
      "/>
      <Reference source="https://likec4.dev/dsl/styling/#relationships"/>
    </Rule>

  </ValidationFramework>

</LikeC4Specification> 

*.cursor/rules/likec4_reference.mdc:

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
---
description: Reference examples for writing LIKEC4 files.
globs: *.likec4
---
Priority: Medium
Instruction: MUST follow these examples when writing LIKEC4 files:

<?xml version="1.0" encoding="UTF-8"?>
<LikeC4Reference xmlns="https://likec4.dev/ns"
                xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
                xsi:schemaLocation="https://likec4.dev/ns likec4-ref.xsd"
                version="2024.1">

  <ElementExamples id="element-examples">
    <SystemExample id="payment-system">
      <CodeSample>
        system PaymentGateway {
          #high-availability #pci-dss
          description "Handles 10k TPS credit card processing"
          technology "Java 21, Spring Boot 3.2"
        }
      </CodeSample>
      <BestPractices>
        <TagUsage pattern="#[standard|team|compliance]"/>
        <TechStackFormat pattern="<language> <version>, <framework> <version>"/>
      </BestPractices>
    </SystemExample>

    <SystemExample id="ioc-pattern">
      <CodeSample>
        specification {
            tag cli
            tag gui
            tag ioc
            tag callback

            element cli
            element gui
            element framework
            element event_handler
        }

        model {
            ConsoleApp = cli 'Console Interface' {
                #cli #direct-control
                description "Direct control flow example"
                technology "Python 3.12"
                style {
                    shape rectangle
                    color secondary
                }
            }

            FrameworkExample = gui 'GUI Framework' {
                #gui #ioc
                description "Inversion of control implementation"
                technology "Java Swing"
                style {
                    shape hexagon
                    color tertiary
                }
            }

            EventProcessor = event_handler 'Input Handler' {
                #callback
                description "Handles UI events"
                technology "Java Lambda"
                style {
                    shape ellipse
                    color electric-blue
                }
            }
        }
      </CodeSample>
      <BestPractices>
        <TagUsage pattern="#[a-z-]+"/>
        <ElementDefinition pattern="\w+\s*=\s*\w+\s+'[^']+'"/>
        <TechStackFormat pattern="&lt;language&gt; &lt;version&gt;"/>
      </BestPractices>
      <Reference source="likec4_specification.xml#tag-declaration"/>
    </SystemExample>

    <StylingExamples id="color-usage">
      <ColorExample id="official-palette">
        <CodeSample>
          specification {
              // Official color names
              color primary   #3b82f6
              color secondary #0ea5e9
              color muted     #64748b

              // Custom color definition
              color brand-blue #1d4ed8

              element system
              element component
          }

          model {
              CoreService = system 'Main Service' {
                  style {
                      shape rectangle
                      color primary  // Official color
                  }
              }

              AuthModule = component 'Authentication' {
                  style {
                      shape cylinder
                      color secondary  // Official color
                  }
              }

              BrandedComponent = component 'Custom UI' {
                  style {
                      shape browser
                      color brand-blue  // Custom color
                  }
              }

              deployment {
                  node 'EU Cluster' {
                      style {
                          color #7e22ce  // Direct hex code
                          shape kubernetes
                      }
                      contains CoreService
                      contains AuthModule
                  }
              }
          }
        </CodeSample>
        <BestPractices>
          <ColorUsage pattern="(primary|secondary|muted)"/>
          <HexValidation pattern="#[0-9a-f]{6}"/>
          <Reference source="likec4_specification.xml#valid-colors"/>
        </BestPractices>
        <Reference source="https://likec4.dev/dsl/styling/#color"/>
      </ColorExample>

      <KindStyleExample id="actor-overrides">
        <CodeSample>
          specification {
              element service {
                  style {
                      shape rectangle
                      color primary
                  }
              }
          }

          model {
              PaymentService = service 'Payment Processor' {
                  style {
                      color secondary  // Override
                      border dashed
                  }
              }
          }
        </CodeSample>
        <BestPractices>
          <InheritanceNote>Element styles inherit from kind and override properties</InheritanceNote>
        </BestPractices>
        <Reference source="https://likec4.dev/dsl/specification/#element-kind"/>
      </KindStyleExample>

      <BorderExample id="valid-borders">
        <CodeSample>
          style {
              border dotted
              color primary
          }
        </CodeSample>
        <BestPractices>
          <Do>Use border instead of CSS-inspired properties</Do>
          <Dont>Never use CSS-style properties like border-width or border-color</Dont>
        </BestPractices>
      </BorderExample>
    </StylingExamples>
  </ElementExamples>

  <RelationshipPatterns id="rel-patterns">
    <AsyncFlowExample id="order-processing-flow">
      <CodeSample>
        Frontend -> OrderQueue "Submits order" {
          technology "JSON over RabbitMQ"
          delivery-guarantee "exactly-once"
        }
        OrderQueue -> OrderProcessor "Pulls orders"
      </CodeSample>
    </AsyncFlowExample>

    <ConcurrencyControl id="async-pattern">
      <CodeSample>
        component -> pool "Controls concurrency" {
          technology "asyncio.Semaphore"
          constraints "maxConcurrent: 10"
        }
      </CodeSample>
      <Reference source="https://likec4.dev/dsl/model/#relationships"/>
    </ConcurrencyControl>

    <BlockchainIntegration id="web3-rpc">
      <CodeSample>
        Web3Client -> EthereumNode "JSON-RPC" {
          technology "Web3.py"
          security "TLS 1.3"
        }
      </CodeSample>
    </BlockchainIntegration>

    <IoCExample id="framework-callback-flow">
      <CodeSample>
        Framework -> Component "binds #callback" {
            technology "Event Bus"
        }
        Framework -> Component "triggers on" {
            delivery-guarantee "async"
            #ioc
        }
      </CodeSample>
      <Reference source="likec4_specification.xml#control-inversion"/>
    </IoCExample>

    <TagOrderExample id="proper-tag-placement">
      <CodeSample>
        // Correct
        Frontend -> Backend "API Calls" {
            #rest #async
            technology "HTTP/2"
            delivery-guarantee "at-least-once"
        }

        // Incorrect
        Frontend -> Backend "API Calls" {
            technology "HTTP/2"
            #rest #async // Violates tag-first rule
        }
      </CodeSample>
      <ValidationError 
        pattern="//Relationship[*/text()[starts-with(.,'#')][preceding-sibling::*[not(starts-with(text(),'#'))]]]"
        message="Tags must be first in relationship blocks"/>
      <Reference source="likec4_specification.xml#relationship-tag-order"/>
    </TagOrderExample>

    <IoCExample id="dependency-injection">
      <CodeSample>
        // Specification
        specification {
          relationship injects {
            notation "Dependency injection relationship type"
            line dotted
            head open
            color indigo
          }
        }

        // Model usage
        model {
          PicoContainer -[injects]-> ColonMovieFinder {
            technology "Constructor Injection"
          }
        }
      </CodeSample>
      <BestPractices>
        <Pattern name="SpecificationStyle">
          <Do>Use direct style properties</Do>
          <Dont>Nest style blocks in relationship specs</Dont>
        </Pattern>
        <Validation reference="likec4_codestyle.xml#relationship-style-syntax"/>
      </BestPractices>
    </IoCExample>

    <ContainmentExample id="system-component-flow">
      <CodeSample>
        // CORRECT: Relationships only between peer elements
        model {
          API = system {
            contains ComponentA = component
            contains ComponentB = component
          }

          ComponentA -> ComponentB "Internal comms"
          API -> ExternalService "Public API calls"
        }

        // INCORRECT: Relationship between parent and child
        model {
          API = system {
            contains Component = component
          }
          API -> Component  // Violates containment rules
        }
      </CodeSample>
      <BestPractices>
        <Pattern name="ContainmentFlow">
          <Do>Use containment for hierarchy</Do>
          <Do>Only relate to external elements</Do>
          <Dont>Create explicit parent-child relationships</Dont>
        </Pattern>
      </BestPractices>
    </ContainmentExample>
  </RelationshipPatterns>

  <StyleGuidelines id="style-guide">
    <ColorPalette id="main-palette">
      <Primary hex="#3b82f6" usage="Core systems"/>
      <Secondary hex="#6366f1" usage="Supporting services"/>
      <Tertiary hex="#64748b" usage="Infrastructure"/>
    </ColorPalette>

    <InheritanceExamples>
      <Microservice inherits="System" adds="circuit-breaker"/>
    </InheritanceExamples>

    <BlockchainStyleGroup>
      <Color hex="#2E27AD" usage="Web3 components"/>
      <ShapeUsage shape="cylinder" purpose="Blockchain nodes"/>
      <IconMapping icon="web3" path="/icons/web3.svg"/>
    </BlockchainStyleGroup>

    <AsyncServiceStyle>
      <DefaultStyle shape="hexagon" color="#3B82F6" border="dashed"/>
      <StateVisualization states="running,error,paused"/>
    </AsyncServiceStyle>
  </StyleGuidelines>

  <ViewTemplates id="view-templates">
    <DynamicViewExample id="auth-flow">
      <CodeSample>
        dynamic view AuthFlow {
          title "Authentication Sequence"
          customer -> loginPage "Enters credentials"
          loginPage -> authService "Validates password"
          authService -> sessionDB "Stores session"
          include securityInfra.*
        }
      </CodeSample>
      <BestPractices>
        <Pattern name="DynamicViewStructure">
          <Do>Define interactions directly in view body</Do>
          <Dont>Use 'of' clause or scope limitations</Dont>
        </Pattern>
      </BestPractices>
      <Reference source="https://likec4.dev/dsl/dynamic-views/"/>
    </DynamicViewExample>

    <LandscapeView id="system-landscape">
      <Structure>
        include *
        exclude internal_*
      </Structure>
      <Layout direction="TopBottom" spacing="120"/>
      <Reference source="https://likec4.dev/examples/bigbank/#system-landscape"/>
    </LandscapeView>

    <PipelineView id="async-pipeline">
      <Structure>
        include component*,service*
        exclude *test
      </Structure>
      <Layout direction="LeftRight" spacing="150"/>
      <AnnotationRules>
        <FlowDirection from="left" to="right"/>
        <ColorScheme base="primary" accent="secondary"/>
      </AnnotationRules>
    </PipelineView>

    <MonitoringDashboard id="status-dashboard">
      <Layout grid="3x3" responsive="true"/>
      <ComponentCard types="service,monitor"/>
      <MetricDisplay types="gauge,sparkline"/>
    </MonitoringDashboard>

    <AutoLayoutExamples id="autolayout-patterns">
      <BasicUsage id="simple-autolayout">
        <CodeSample>
          view {
            include *
            autoLayout LeftRight 120 110
          }
        </CodeSample>
        <BestPractices>
          <ParameterOrder>direction [rank-distance] [node-distance]</ParameterOrder>
        </BestPractices>
      </BasicUsage>

      <ViewStructureExample id="proper-include-order">
        <CodeSample>
          view {
            // Correct include/styling order
            include *
            exclude internal_*

            style element.tag = #core {
              color primary
            }

            // Incorrect (would trigger validation error)
            // style * { color: red }
            // include *
          }
        </CodeSample>
        <BestPractices>
          <OrderingRule>Include  Exclude  Style  Relationships</OrderingRule>
        </BestPractices>
      </ViewStructureExample>
    </AutoLayoutExamples>

    <DynamicViewExample id="proper-dynamic-usage">
      <CodeSample>
        dynamic view UserCheckoutFlow {
          title "E-commerce Checkout Process"

          // Defined directly in view
          guest = actor 'Guest User'
          cart = component 'Shopping Cart'
          payment = component 'Payment Gateway'

          guest -> cart 'adds items'
          cart -> payment 'process checkout' {
            technology "REST API"
          }
          parallel {
            payment -> fraudCheck
            payment -> inventoryCheck
          }
        }
      </CodeSample>
      <BestPractices>
        <Pattern name="DynamicViewContent">
          <Do>Define transient elements and interactions</Do>
          <Dont>Reuse model relationships without navigation</Dont>
        </Pattern>
      </BestPractices>
    </DynamicViewExample>
  </ViewTemplates>

  <WorkspaceExamples id="project-structure">
    <FileOrganizationExample>
      <DirectoryTree>
        project/
          specs/
            elements.likec4
            relationships.likec4
          model/
            core/
              auth-system.likec4
            infrastructure/
              aws.likec4
          views/
            security-views.likec4
      </DirectoryTree>
      <Reference source="https://likec4.dev/dsl/workspace/"/>
    </FileOrganizationExample>
  </WorkspaceExamples>

  <SecurityPatterns id="security-pattern">
    <RecommendedSetup>
      <CodeSample>
        API_Gateway -> AuthService "Validates JWT" {
          #security-critical
          technology "OAuth2.0"
          security "TLS 1.3"
        }
      </CodeSample>
      <BestPractices>
        <Pattern name="ZeroTrust">
          <Validation reference="likec4_specification.xml#zero-trust-rule"/>
          <Example>Enforce mTLS for all internal services</Example>
        </Pattern>
      </BestPractices>
    </RecommendedSetup>
  </SecurityPatterns>

  <AsyncFlowValidation id="async-flow-validation">
    <ComplianceCheck>
      <Validation xpath="//Relationship[@type='async'][@delivery-guarantee]"/>
      <Example reference="likec4_specification.xml#async-messaging-rule"/>
    </ComplianceCheck>
  </AsyncFlowValidation>

  <CrossReferences>
    <ExampleToSpec reference="likec4_specification.xml#system-kind"/>
    <StyleToSpec reference="likec4_specification.xml#color-inheritance"/>
    <ExampleToSpec reference="likec4_specification.xml#http-relationship"/>
    <PatternToRule reference="likec4_specification.xml#security-validation"/>
  </CrossReferences>

  <DynamicPatterns id="auto-discovery">
    <ExtensionExample id="cloud-resources">
      <CodeSample>
        model {
          extend cloud {
            aws_lb = component 'LoadBalancer' {
              #infrastructure
              technology "AWS ALB"
            }
          }
        }
      </CodeSample>
      <Validation reference="likec4_specification.xml#extend-validation"/>
    </ExtensionExample>

    <RuleDiscovery>
      <Pattern match="//Element[contains(@technology,'AWS')]">
        <AutoRule type="aws-resource"/>
      </Pattern>
    </RuleDiscovery>

    <CloudIntegrationExample id="aws-extension">
      <CodeSample>
        extend cloud {
          aws_rds = component 'Database' {
            #persistence #managed
            technology "AWS RDS PostgreSQL"
            style {
              shape cylinder
              color "#2E27AD"
            }
          }
        }
      </CodeSample>
      <Validation reference="likec4_specification.xml#aws-resource-rule"/>
    </CloudIntegrationExample>
  </DynamicPatterns>

  <MetadataExamples id="custom-properties">
    <ElementMetadataExample id="service-sla">
      <CodeSample>
        model {
            PaymentService = system 'Payment Processor' {
                metadata {
                    availability "99.99%"
                    region "eu-west-1"
                }
                technology "Java, Spring Boot"
            }
        }
      </CodeSample>
      <BestPractices>
        <Reference source="likec4_specification.xml#metadata-properties"/>
      </BestPractices>
    </ElementMetadataExample>

    <RelationshipMetadataExample id="message-delivery">
      <CodeSample>
        model {
            OrderService -> PaymentService "Processes payments" {
                metadata {
                    protocol "gRPC"
                    delivery-guarantee "exactly-once"
                    avg-latency "150ms"
                }
                #async #critical-path
            }
        }
      </CodeSample>
      <ValidationError 
        pattern="//Relationship[not(metadata)]"
        message="Custom properties must be in metadata blocks"/>
      <Reference source="https://likec4.dev/dsl/model/#relationship-properties"/>
    </RelationshipMetadataExample>
  </MetadataExamples>

  <NotationExamples>
    <ElementNotationExample id="inline-element-note">
      <CodeSample>
        specification {
            element database {
                notation "Persistent storage"
                style { shape cylinder }
            }
        }
      </CodeSample>
    </ElementNotationExample>

    <StyleNotationExample id="style-block-note">
      <CodeSample>
        view {
            style legacySystem {
                notation "Scheduled for decommission"
                color muted
            }
        }
      </CodeSample>
    </StyleNotationExample>
  </NotationExamples>

  <StylePredicateExample id="wildcard-usage">
    <CodeSample>
      view {
          style * {  // Base style for all elements
              color primary
              opacity 90%
          }
          style element.tag = #critical {
              color red  // Overrides base style
          }
      }
    </CodeSample>
    <BestPractices>
      <Pattern name="BaseStyleFirst">
        <Do>Define wildcard styles before specific overrides</Do>
        <Validation reference="likec4_codestyle.xml#style-predicate-requirement"/>
      </Pattern>
    </BestPractices>
  </StylePredicateExample>
</LikeC4Reference> 

Three reference/base files to build upon:
elements.likec4

specification {
  color custom #6BD731

  element actor {
    notation "Person"
    style {
      shape person
    }
  }

  element system {
    notation "Software system"
    style {
      opacity 10%
    }
  }

  element async {
    notation "Async system"
    style {
      opacity 10%
    }
  }

  element externalSystem {
    notation "External System"
    style {
      color secondary
      opacity 10%
    }
  }

  element container {
    style {
      opacity 50%
    }
  }

  element app {
    notation "Application"
    style {
      multiple true
    }
  }

  element component {
    style {
      opacity 50%
    }
  }

  element mobileApp {
    notation "Mobile Application"
    style {
      shape mobile
      icon tech:swift
      //icon https://icon.icepanel.io/Technology/svg/Swift.svg
    }
  }

  element queue {
    notation "Message queue"
    style {
      shape queue
      color secondary
      icon aws:simple-queue-service
    }
  }

  element database {
    notation "Database"
    style {
      shape storage
    }
  }
  element table {
    notation "Database Table"
    style {
      shape storage
    }
  }
  element gqlMutation {
    notation "GraphQL Mutation"
    style {
      icon tech:graphql
    }
  }
  element gqlQuery {
    notation "GraphQL Query"
    style {
      icon tech:graphql
    }
  }
  element lambda {
    notation "Serverless function"
    style {
      icon aws:lambda
    }
  }
  element ExternalSystem {
    notation "External System"
    style {
      color secondary
      shape queue
    }
  }
  element SystemBoundary {
    style {
      shape storage
    }
  }
  element scenario {
    style {
      color neon-pink
      shape cylinder
    }
  }
  element participant {
    style {
      color electric-blue
      shape queue
    }
  }

  tag team-a
  tag team-b

  relationship uses
  relationship requests

  tag deprecated
  tag next
  tag api
  tag db

  element repositories {
    notation "Data Repositories"
    style {
      color indigo
      shape storage
    }
  }

  element repository {
    notation "Data Repository"
    style {
      color indigo
      shape storage
    }
  }

}

colors.likec4

   1
   2
   3
   4
   5
   6
   7
   8
   9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30
  31
  32
  33
  34
  35
  36
  37
  38
  39
  40
  41
  42
  43
  44
  45
  46
  47
  48
  49
  50
  51
  52
  53
  54
  55
  56
  57
  58
  59
  60
  61
  62
  63
  64
  65
  66
  67
  68
  69
  70
  71
  72
  73
  74
  75
  76
  77
  78
  79
  80
  81
  82
  83
  84
  85
  86
  87
  88
  89
  90
  91
  92
  93
  94
  95
  96
  97
  98
  99
 100
 101
 102
 103
 104
 105
 106
 107
 108
 109
 110
 111
 112
 113
 114
 115
 116
 117
 118
 119
 120
 121
 122
 123
 124
 125
 126
 127
 128
 129
 130
 131
 132
 133
 134
 135
 136
 137
 138
 139
 140
 141
 142
 143
 144
 145
 146
 147
 148
 149
 150
 151
 152
 153
 154
 155
 156
 157
 158
 159
 160
 161
 162
 163
 164
 165
 166
 167
 168
 169
 170
 171
 172
 173
 174
 175
 176
 177
 178
 179
 180
 181
 182
 183
 184
 185
 186
 187
 188
 189
 190
 191
 192
 193
 194
 195
 196
 197
 198
 199
 200
 201
 202
 203
 204
 205
 206
 207
 208
 209
 210
 211
 212
 213
 214
 215
 216
 217
 218
 219
 220
 221
 222
 223
 224
 225
 226
 227
 228
 229
 230
 231
 232
 233
 234
 235
 236
 237
 238
 239
 240
 241
 242
 243
 244
 245
 246
 247
 248
 249
 250
 251
 252
 253
 254
 255
 256
 257
 258
 259
 260
 261
 262
 263
 264
 265
 266
 267
 268
 269
 270
 271
 272
 273
 274
 275
 276
 277
 278
 279
 280
 281
 282
 283
 284
 285
 286
 287
 288
 289
 290
 291
 292
 293
 294
 295
 296
 297
 298
 299
 300
 301
 302
 303
 304
 305
 306
 307
 308
 309
 310
 311
 312
 313
 314
 315
 316
 317
 318
 319
 320
 321
 322
 323
 324
 325
 326
 327
 328
 329
 330
 331
 332
 333
 334
 335
 336
 337
 338
 339
 340
 341
 342
 343
 344
 345
 346
 347
 348
 349
 350
 351
 352
 353
 354
 355
 356
 357
 358
 359
 360
 361
 362
 363
 364
 365
 366
 367
 368
 369
 370
 371
 372
 373
 374
 375
 376
 377
 378
 379
 380
 381
 382
 383
 384
 385
 386
 387
 388
 389
 390
 391
 392
 393
 394
 395
 396
 397
 398
 399
 400
 401
 402
 403
 404
 405
 406
 407
 408
 409
 410
 411
 412
 413
 414
 415
 416
 417
 418
 419
 420
 421
 422
 423
 424
 425
 426
 427
 428
 429
 430
 431
 432
 433
 434
 435
 436
 437
 438
 439
 440
 441
 442
 443
 444
 445
 446
 447
 448
 449
 450
 451
 452
 453
 454
 455
 456
 457
 458
 459
 460
 461
 462
 463
 464
 465
 466
 467
 468
 469
 470
 471
 472
 473
 474
 475
 476
 477
 478
 479
 480
 481
 482
 483
 484
 485
 486
 487
 488
 489
 490
 491
 492
 493
 494
 495
 496
 497
 498
 499
 500
 501
 502
 503
 504
 505
 506
 507
 508
 509
 510
 511
 512
 513
 514
 515
 516
 517
 518
 519
 520
 521
 522
 523
 524
 525
 526
 527
 528
 529
 530
 531
 532
 533
 534
 535
 536
 537
 538
 539
 540
 541
 542
 543
 544
 545
 546
 547
 548
 549
 550
 551
 552
 553
 554
 555
 556
 557
 558
 559
 560
 561
 562
 563
 564
 565
 566
 567
 568
 569
 570
 571
 572
 573
 574
 575
 576
 577
 578
 579
 580
 581
 582
 583
 584
 585
 586
 587
 588
 589
 590
 591
 592
 593
 594
 595
 596
 597
 598
 599
 600
 601
 602
 603
 604
 605
 606
 607
 608
 609
 610
 611
 612
 613
 614
 615
 616
 617
 618
 619
 620
 621
 622
 623
 624
 625
 626
 627
 628
 629
 630
 631
 632
 633
 634
 635
 636
 637
 638
 639
 640
 641
 642
 643
 644
 645
 646
 647
 648
 649
 650
 651
 652
 653
 654
 655
 656
 657
 658
 659
 660
 661
 662
 663
 664
 665
 666
 667
 668
 669
 670
 671
 672
 673
 674
 675
 676
 677
 678
 679
 680
 681
 682
 683
 684
 685
 686
 687
 688
 689
 690
 691
 692
 693
 694
 695
 696
 697
 698
 699
 700
 701
 702
 703
 704
 705
 706
 707
 708
 709
 710
 711
 712
 713
 714
 715
 716
 717
 718
 719
 720
 721
 722
 723
 724
 725
 726
 727
 728
 729
 730
 731
 732
 733
 734
 735
 736
 737
 738
 739
 740
 741
 742
 743
 744
 745
 746
 747
 748
 749
 750
 751
 752
 753
 754
 755
 756
 757
 758
 759
 760
 761
 762
 763
 764
 765
 766
 767
 768
 769
 770
 771
 772
 773
 774
 775
 776
 777
 778
 779
 780
 781
 782
 783
 784
 785
 786
 787
 788
 789
 790
 791
 792
 793
 794
 795
 796
 797
 798
 799
 800
 801
 802
 803
 804
 805
 806
 807
 808
 809
 810
 811
 812
 813
 814
 815
 816
 817
 818
 819
 820
 821
 822
 823
 824
 825
 826
 827
 828
 829
 830
 831
 832
 833
 834
 835
 836
 837
 838
 839
 840
 841
 842
 843
 844
 845
 846
 847
 848
 849
 850
 851
 852
 853
 854
 855
 856
 857
 858
 859
 860
 861
 862
 863
 864
 865
 866
 867
 868
 869
 870
 871
 872
 873
 874
 875
 876
 877
 878
 879
 880
 881
 882
 883
 884
 885
 886
 887
 888
 889
 890
 891
 892
 893
 894
 895
 896
 897
 898
 899
 900
 901
 902
 903
 904
 905
 906
 907
 908
 909
 910
 911
 912
 913
 914
 915
 916
 917
 918
 919
 920
 921
 922
 923
 924
 925
 926
 927
 928
 929
 930
 931
 932
 933
 934
 935
 936
 937
 938
 939
 940
 941
 942
 943
 944
 945
 946
 947
 948
 949
 950
 951
 952
 953
 954
 955
 956
 957
 958
 959
 960
 961
 962
 963
 964
 965
 966
 967
 968
 969
 970
 971
 972
 973
 974
 975
 976
 977
 978
 979
 980
 981
 982
 983
 984
 985
 986
 987
 988
 989
 990
 991
 992
 993
 994
 995
 996
 997
 998
 999
1000
1001
1002
1003
1004
1005
1006
1007
1008
1009
1010
1011
1012
1013
1014
1015
1016
1017
1018
1019
1020
1021
1022
1023
1024
1025
1026
1027
1028
1029
1030
1031
1032
1033
1034
1035
1036
1037
1038
1039
1040
1041
1042
1043
1044
1045
1046
1047
1048
1049
1050
1051
1052
1053
1054
1055
1056
1057
1058
1059
1060
1061
1062
1063
1064
1065
1066
1067
1068
1069
1070
1071
specification {

  // Add retrowave color palette
  color neon-pink #ff00ff
  color electric-blue #00ffff
  color retro-black #0d0d15

  element themecolor
  element cylinder {
    style {
      shape cylinder
    }
  }
  element rect {
    style {
      shape rectangle
    }
  }
  element person {
    style {
      shape person
      color green
    }
  }
  element mobile {
    style {
      shape mobile
    }
  }
  element browser {
    style {
      shape browser
    }
  }
  element compound
}
model {

  themecolor colors {
    title: 'Theme Colors'
    style {
      color gray
    }

    themecolor primary {
      title "PRIMARY"
      description '
        Example of primary Theme Color
        with multiline description
        and more text
      '
      style {
        color primary
      }

      cylinder = cylinder {
        title: 'Cylinder'
        technology: 'cylinder'
        description: '
          Example of Cylinder Shape
          with multiline description
        '
        style {
          color primary
        }
      }
      queue = queue {
        title: 'Queue'
        technology: 'queue shape'
        description: '
          Example of Queue Shape
          with multiline description
        '
        style {
          color primary
        }
      }
      mobile = mobile {
        title: 'Mobile'
        technology: 'mobile shape'
        description: '
          Example of Mobile Shape
          with multiline description
        '
        style {
          color primary
        }
      }
      browser = browser {
        title: 'Browser'
        technology: 'browser shape'
        description: '
          Example of Browser Shape
          with multiline description
        '
        style {
          color primary
        }
      }
      person = person {
        title: 'Person'
        technology: 'person shape'
        description: '
          Example of Person Shape
          with multiline description
        '
        style {
          color primary
        }
      }
      rect = rect {
        title: 'Rectangle'
        technology: 'rect shape'
        description: '
          Example of Rectangle Shape
          with multiline description
        '
        style {
          color primary
        }
      }
      person -> rect
      browser -> mobile
      cylinder -> queue
    }
    themecolor blue {
      title "BLUE"
      description '
        Example of blue Theme Color
        with multiline description
        and more text
      '
      style {
        color blue
      }

      cylinder = cylinder {
        title: 'Cylinder'
        technology: 'cylinder'
        description: '
          Example of Cylinder Shape
          with multiline description
        '
        style {
          color blue
        }
      }
      queue = queue {
        title: 'Queue'
        technology: 'queue shape'
        description: '
          Example of Queue Shape
          with multiline description
        '
        style {
          color blue
        }
      }
      mobile = mobile {
        title: 'Mobile'
        technology: 'mobile shape'
        description: '
          Example of Mobile Shape
          with multiline description
        '
        style {
          color blue
        }
      }
      browser = browser {
        title: 'Browser'
        technology: 'browser shape'
        description: '
          Example of Browser Shape
          with multiline description
        '
        style {
          color blue
        }
      }
      person = person {
        title: 'Person'
        technology: 'person shape'
        description: '
          Example of Person Shape
          with multiline description
        '
        style {
          color blue
        }
      }
      rect = rect {
        title: 'Rectangle'
        technology: 'rect shape'
        description: '
          Example of Rectangle Shape
          with multiline description
        '
        style {
          color blue
        }
      }
      person -> rect
      browser -> mobile
      cylinder -> queue
    }
    themecolor secondary {
      title "SECONDARY"
      description '
        Example of secondary Theme Color
        with multiline description
        and more text
      '
      style {
        color secondary
      }

      cylinder = cylinder {
        title: 'Cylinder'
        technology: 'cylinder'
        description: '
          Example of Cylinder Shape
          with multiline description
        '
        style {
          color secondary
        }
      }
      queue = queue {
        title: 'Queue'
        technology: 'queue shape'
        description: '
          Example of Queue Shape
          with multiline description
        '
        style {
          color secondary
        }
      }
      mobile = mobile {
        title: 'Mobile'
        technology: 'mobile shape'
        description: '
          Example of Mobile Shape
          with multiline description
        '
        style {
          color secondary
        }
      }
      browser = browser {
        title: 'Browser'
        technology: 'browser shape'
        description: '
          Example of Browser Shape
          with multiline description
        '
        style {
          color secondary
        }
      }
      person = person {
        title: 'Person'
        technology: 'person shape'
        description: '
          Example of Person Shape
          with multiline description
        '
        style {
          color secondary
        }
      }
      rect = rect {
        title: 'Rectangle'
        technology: 'rect shape'
        description: '
          Example of Rectangle Shape
          with multiline description
        '
        style {
          color secondary
        }
      }
      person -> rect
      browser -> mobile
      cylinder -> queue
    }
    themecolor sky {
      title "SKY"
      description '
        Example of sky Theme Color
        with multiline description
        and more text
      '
      style {
        color sky
      }

      cylinder = cylinder {
        title: 'Cylinder'
        technology: 'cylinder'
        description: '
          Example of Cylinder Shape
          with multiline description
        '
        style {
          color sky
        }
      }
      queue = queue {
        title: 'Queue'
        technology: 'queue shape'
        description: '
          Example of Queue Shape
          with multiline description
        '
        style {
          color sky
        }
      }
      mobile = mobile {
        title: 'Mobile'
        technology: 'mobile shape'
        description: '
          Example of Mobile Shape
          with multiline description
        '
        style {
          color sky
        }
      }
      browser = browser {
        title: 'Browser'
        technology: 'browser shape'
        description: '
          Example of Browser Shape
          with multiline description
        '
        style {
          color sky
        }
      }
      person = person {
        title: 'Person'
        technology: 'person shape'
        description: '
          Example of Person Shape
          with multiline description
        '
        style {
          color sky
        }
      }
      rect = rect {
        title: 'Rectangle'
        technology: 'rect shape'
        description: '
          Example of Rectangle Shape
          with multiline description
        '
        style {
          color sky
        }
      }
      person -> rect
      browser -> mobile
      cylinder -> queue
    }
    themecolor muted {
      title "MUTED"
      description '
        Example of muted Theme Color
        with multiline description
        and more text
      '
      style {
        color muted
      }

      cylinder = cylinder {
        title: 'Cylinder'
        technology: 'cylinder'
        description: '
          Example of Cylinder Shape
          with multiline description
        '
        style {
          color muted
        }
      }
      queue = queue {
        title: 'Queue'
        technology: 'queue shape'
        description: '
          Example of Queue Shape
          with multiline description
        '
        style {
          color muted
        }
      }
      mobile = mobile {
        title: 'Mobile'
        technology: 'mobile shape'
        description: '
          Example of Mobile Shape
          with multiline description
        '
        style {
          color muted
        }
      }
      browser = browser {
        title: 'Browser'
        technology: 'browser shape'
        description: '
          Example of Browser Shape
          with multiline description
        '
        style {
          color muted
        }
      }
      person = person {
        title: 'Person'
        technology: 'person shape'
        description: '
          Example of Person Shape
          with multiline description
        '
        style {
          color muted
        }
      }
      rect = rect {
        title: 'Rectangle'
        technology: 'rect shape'
        description: '
          Example of Rectangle Shape
          with multiline description
        '
        style {
          color muted
        }
      }
      person -> rect
      browser -> mobile
      cylinder -> queue
    }
    themecolor slate {
      title "SLATE"
      description '
        Example of slate Theme Color
        with multiline description
        and more text
      '
      style {
        color slate
      }

      cylinder = cylinder {
        title: 'Cylinder'
        technology: 'cylinder'
        description: '
          Example of Cylinder Shape
          with multiline description
        '
        style {
          color slate
        }
      }
      queue = queue {
        title: 'Queue'
        technology: 'queue shape'
        description: '
          Example of Queue Shape
          with multiline description
        '
        style {
          color slate
        }
      }
      mobile = mobile {
        title: 'Mobile'
        technology: 'mobile shape'
        description: '
          Example of Mobile Shape
          with multiline description
        '
        style {
          color slate
        }
      }
      browser = browser {
        title: 'Browser'
        technology: 'browser shape'
        description: '
          Example of Browser Shape
          with multiline description
        '
        style {
          color slate
        }
      }
      person = person {
        title: 'Person'
        technology: 'person shape'
        description: '
          Example of Person Shape
          with multiline description
        '
        style {
          color slate
        }
      }
      rect = rect {
        title: 'Rectangle'
        technology: 'rect shape'
        description: '
          Example of Rectangle Shape
          with multiline description
        '
        style {
          color slate
        }
      }
      person -> rect
      browser -> mobile
      cylinder -> queue
    }
    themecolor gray {
      title "GRAY"
      description '
        Example of gray Theme Color
        with multiline description
        and more text
      '
      style {
        color gray
      }

      cylinder = cylinder {
        title: 'Cylinder'
        technology: 'cylinder'
        description: '
          Example of Cylinder Shape
          with multiline description
        '
        style {
          color gray
        }
      }
      queue = queue {
        title: 'Queue'
        technology: 'queue shape'
        description: '
          Example of Queue Shape
          with multiline description
        '
        style {
          color gray
        }
      }
      mobile = mobile {
        title: 'Mobile'
        technology: 'mobile shape'
        description: '
          Example of Mobile Shape
          with multiline description
        '
        style {
          color gray
        }
      }
      browser = browser {
        title: 'Browser'
        technology: 'browser shape'
        description: '
          Example of Browser Shape
          with multiline description
        '
        style {
          color gray
        }
      }
      person = person {
        title: 'Person'
        technology: 'person shape'
        description: '
          Example of Person Shape
          with multiline description
        '
        style {
          color gray
        }
      }
      rect = rect {
        title: 'Rectangle'
        technology: 'rect shape'
        description: '
          Example of Rectangle Shape
          with multiline description
        '
        style {
          color gray
        }
      }
      person -> rect
      browser -> mobile
      cylinder -> queue
    }
    themecolor red {
      title "RED"
      description '
        Example of red Theme Color
        with multiline description
        and more text
      '
      style {
        color red
      }

      cylinder = cylinder {
        title: 'Cylinder'
        technology: 'cylinder'
        description: '
          Example of Cylinder Shape
          with multiline description
        '
        style {
          color red
        }
      }
      queue = queue {
        title: 'Queue'
        technology: 'queue shape'
        description: '
          Example of Queue Shape
          with multiline description
        '
        style {
          color red
        }
      }
      mobile = mobile {
        title: 'Mobile'
        technology: 'mobile shape'
        description: '
          Example of Mobile Shape
          with multiline description
        '
        style {
          color red
        }
      }
      browser = browser {
        title: 'Browser'
        technology: 'browser shape'
        description: '
          Example of Browser Shape
          with multiline description
        '
        style {
          color red
        }
      }
      person = person {
        title: 'Person'
        technology: 'person shape'
        description: '
          Example of Person Shape
          with multiline description
        '
        style {
          color red
        }
      }
      rect = rect {
        title: 'Rectangle'
        technology: 'rect shape'
        description: '
          Example of Rectangle Shape
          with multiline description
        '
        style {
          color red
        }
      }
      person -> rect
      browser -> mobile
      cylinder -> queue
    }
    themecolor green {
      title "GREEN"
      description '
        Example of green Theme Color
        with multiline description
        and more text
      '
      style {
        color green
      }

      cylinder = cylinder {
        title: 'Cylinder'
        technology: 'cylinder'
        description: '
          Example of Cylinder Shape
          with multiline description
        '
        style {
          color green
        }
      }
      queue = queue {
        title: 'Queue'
        technology: 'queue shape'
        description: '
          Example of Queue Shape
          with multiline description
        '
        style {
          color green
        }
      }
      mobile = mobile {
        title: 'Mobile'
        technology: 'mobile shape'
        description: '
          Example of Mobile Shape
          with multiline description
        '
        style {
          color green
        }
      }
      browser = browser {
        title: 'Browser'
        technology: 'browser shape'
        description: '
          Example of Browser Shape
          with multiline description
        '
        style {
          color green
        }
      }
      person = person {
        title: 'Person'
        technology: 'person shape'
        description: '
          Example of Person Shape
          with multiline description
        '
        style {
          color green
        }
      }
      rect = rect {
        title: 'Rectangle'
        technology: 'rect shape'
        description: '
          Example of Rectangle Shape
          with multiline description
        '
        style {
          color green
        }
      }
      person -> rect
      browser -> mobile
      cylinder -> queue
    }
    themecolor amber {
      title "AMBER"
      description '
        Example of amber Theme Color
        with multiline description
        and more text
      '
      style {
        color amber
      }

      cylinder = cylinder {
        title: 'Cylinder'
        technology: 'cylinder'
        description: '
          Example of Cylinder Shape
          with multiline description
        '
        style {
          color amber
        }
      }
      queue = queue {
        title: 'Queue'
        technology: 'queue shape'
        description: '
          Example of Queue Shape
          with multiline description
        '
        style {
          color amber
        }
      }
      mobile = mobile {
        title: 'Mobile'
        technology: 'mobile shape'
        description: '
          Example of Mobile Shape
          with multiline description
        '
        style {
          color amber
        }
      }
      browser = browser {
        title: 'Browser'
        technology: 'browser shape'
        description: '
          Example of Browser Shape
          with multiline description
        '
        style {
          color amber
        }
      }
      person = person {
        title: 'Person'
        technology: 'person shape'
        description: '
          Example of Person Shape
          with multiline description
        '
        style {
          color amber
        }
      }
      rect = rect {
        title: 'Rectangle'
        technology: 'rect shape'
        description: '
          Example of Rectangle Shape
          with multiline description
        '
        style {
          color amber
        }
      }
      person -> rect
      browser -> mobile
      cylinder -> queue
    }
    themecolor indigo {
      title "INDIGO"
      description '
        Example of indigo Theme Color
        with multiline description
        and more text
      '
      style {
        color indigo
      }

      cylinder = cylinder {
        title: 'Cylinder'
        technology: 'cylinder'
        description: '
          Example of Cylinder Shape
          with multiline description
        '
        style {
          color indigo
        }
      }
      queue = queue {
        title: 'Queue'
        technology: 'queue shape'
        description: '
          Example of Queue Shape
          with multiline description
        '
        style {
          color indigo
        }
      }
      mobile = mobile {
        title: 'Mobile'
        technology: 'mobile shape'
        description: '
          Example of Mobile Shape
          with multiline description
        '
        style {
          color indigo
        }
      }
      browser = browser {
        title: 'Browser'
        technology: 'browser shape'
        description: '
          Example of Browser Shape
          with multiline description
        '
        style {
          color indigo
        }
      }
      person = person {
        title: 'Person'
        technology: 'person shape'
        description: '
          Example of Person Shape
          with multiline description
        '
        style {
          color indigo
        }
      }
      rect = rect {
        title: 'Rectangle'
        technology: 'rect shape'
        description: '
          Example of Rectangle Shape
          with multiline description
        '
        style {
          color indigo
        }
      }
      person -> rect
      browser -> mobile
      cylinder -> queue
    }
  }

  themecolor compoundtest {
    compound1 = compound 'Level 1' {
      compound2 = compound 'Level 2' {
        compound3 = compound 'Level 3' {
          compound4 = compound 'Level 4' {
            compound5 = compound 'Level 5' {
              compound6 = compound 'Level 6'
            }
          }
        }
      }
    }
  }

}

views {

  view themecolors of colors {
    title "Theme Colors"
    include *
    exclude compoundtest
  }


  view themecolor_primary of primary {
    title "Theme Color: primary"
    include *, colors

    include element.kind = compound
    style element.kind = compound {
      color primary
    }
  }

  view themecolor_blue of blue {
    title "Theme Color: blue"
    include *, colors

    include element.kind = compound
    style element.kind = compound {
      color blue
    }
  }

  view themecolor_secondary of secondary {
    title "Theme Color: secondary"
    include *, colors

    include element.kind = compound
    style element.kind = compound {
      color secondary
    }
  }

  view themecolor_sky of sky {
    title "Theme Color: sky"
    include *, colors

    include element.kind = compound
    style element.kind = compound {
      color sky
    }
  }

  view themecolor_muted of muted {
    title "Theme Color: muted"
    include *, colors

    include element.kind = compound
    style element.kind = compound {
      color muted
    }
  }

  view themecolor_slate of slate {
    title "Theme Color: slate"
    include *, colors

    include element.kind = compound
    style element.kind = compound {
      color slate
    }
  }

  view themecolor_gray of gray {
    title "Theme Color: gray"
    include *, colors

    include element.kind = compound
    style element.kind = compound {
      color gray
    }
  }

  view themecolor_red of red {
    title "Theme Color: red"
    include *, colors

    include element.kind = compound
    style element.kind = compound {
      color red
    }
  }

  view themecolor_green of green {
    title "Theme Color: green"
    include *, colors

    include element.kind = compound
    style element.kind = compound {
      color green
    }
  }

  view themecolor_amber of amber {
    title "Theme Color: amber"
    include *, colors

    include element.kind = compound
    style element.kind = compound {
      color amber
    }
  }

  view themecolor_indigo of indigo {
    title "Theme Color: indigo"
    include *, colors

    include element.kind = compound
    style element.kind = compound {
      color indigo
    }
  }

relationships.likec4

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
specification {

  element themerelationships
  tag source

  relationship solid {
    line solid
  }


  relationship primary {
    color primary
  }
  relationship back_primary {
    color primary
    head none
    tail onormal
  }

  relationship blue {
    color blue
  }
  relationship back_blue {
    color blue
    head none
    tail onormal
  }

  relationship secondary {
    color secondary
  }
  relationship back_secondary {
    color secondary
    head none
    tail onormal
  }

  relationship sky {
    color sky
  }
  relationship back_sky {
    color sky
    head none
    tail onormal
  }

  relationship muted {
    color muted
  }
  relationship back_muted {
    color muted
    head none
    tail onormal
  }

  relationship slate {
    color slate
  }
  relationship back_slate {
    color slate
    head none
    tail onormal
  }

  relationship gray {
    color gray
  }
  relationship back_gray {
    color gray
    head none
    tail onormal
  }

  relationship red {
    color red
  }
  relationship back_red {
    color red
    head none
    tail onormal
  }

  relationship green {
    color green
  }
  relationship back_green {
    color green
    head none
    tail onormal
  }

  relationship amber {
    color amber
  }
  relationship back_amber {
    color amber
    head none
    tail onormal
  }

  relationship indigo {
    color indigo
  }
  relationship back_indigo {
    color indigo
    head none
    tail onormal
  }


}

model {

  themerelationships relationship_colors {
    title 'Relationships Colors'
    style {
      color muted
    }


    primary_source = rect 'PRIMARY' {
      #source
      style { color primary }
    }
    primary_target = rect 'PRIMARY' {
      style { color primary }
    }
    primary_source -[primary]-> primary_target 'relation with primary color'
    primary_target -[back_primary]-> primary_source 'back relation with primary color'

    blue_source = rect 'BLUE' {
      #source
      style { color blue }
    }
    blue_target = rect 'BLUE' {
      style { color blue }
    }
    blue_source -[blue]-> blue_target 'relation with blue color'
    blue_target -[back_blue]-> blue_source 'back relation with blue color'

    secondary_source = rect 'SECONDARY' {
      #source
      style { color secondary }
    }
    secondary_target = rect 'SECONDARY' {
      style { color secondary }
    }
    secondary_source -[secondary]-> secondary_target 'relation with secondary color'
    secondary_target -[back_secondary]-> secondary_source 'back relation with secondary color'

    sky_source = rect 'SKY' {
      #source
      style { color sky }
    }
    sky_target = rect 'SKY' {
      style { color sky }
    }
    sky_source -[sky]-> sky_target 'relation with sky color'
    sky_target -[back_sky]-> sky_source 'back relation with sky color'

    muted_source = rect 'MUTED' {
      #source
      style { color muted }
    }
    muted_target = rect 'MUTED' {
      style { color muted }
    }
    muted_source -[muted]-> muted_target 'relation with muted color'
    muted_target -[back_muted]-> muted_source 'back relation with muted color'

    slate_source = rect 'SLATE' {
      #source
      style { color slate }
    }
    slate_target = rect 'SLATE' {
      style { color slate }
    }
    slate_source -[slate]-> slate_target 'relation with slate color'
    slate_target -[back_slate]-> slate_source 'back relation with slate color'

    gray_source = rect 'GRAY' {
      #source
      style { color gray }
    }
    gray_target = rect 'GRAY' {
      style { color gray }
    }
    gray_source -[gray]-> gray_target 'relation with gray color'
    gray_target -[back_gray]-> gray_source 'back relation with gray color'

    red_source = rect 'RED' {
      #source
      style { color red }
    }
    red_target = rect 'RED' {
      style { color red }
    }
    red_source -[red]-> red_target 'relation with red color'
    red_target -[back_red]-> red_source 'back relation with red color'

    green_source = rect 'GREEN' {
      #source
      style { color green }
    }
    green_target = rect 'GREEN' {
      style { color green }
    }
    green_source -[green]-> green_target 'relation with green color'
    green_target -[back_green]-> green_source 'back relation with green color'

    amber_source = rect 'AMBER' {
      #source
      style { color amber }
    }
    amber_target = rect 'AMBER' {
      style { color amber }
    }
    amber_source -[amber]-> amber_target 'relation with amber color'
    amber_target -[back_amber]-> amber_source 'back relation with amber color'

    indigo_source = rect 'INDIGO' {
      #source
      style { color indigo }
    }
    indigo_target = rect 'INDIGO' {
      style { color indigo }
    }
    indigo_source -[indigo]-> indigo_target 'relation with indigo color'
    indigo_target -[back_indigo]-> indigo_source 'back relation with indigo color'

  }
}

views {

  view relationshipcolors of relationship_colors {
    include relationship_colors
    include element.tag == #source
  }


  view relationship_primary of primary_source {
    include relationship_colors,
      primary_source with {
        technology 'source'
        description: '
          Example of primary relationship color
          above muted color'
      },
      primary_target with {
        technology 'target'
        description: '
          Example of primary relationship color
          above primary color'
      }
  }
  view relationship_primary_target of primary_target {
    include relationship_colors,
      primary_source with {
        technology 'source'
        description: '
          Example of primary relationship color
          above muted color'
      },
      primary_target with {
        technology 'target'
        description: '
          Example of primary relationship color
          above primary color'
      }
    style relationship_colors {
      color primary
    }
  }

  view relationship_blue of blue_source {
    include relationship_colors,
      blue_source with {
        technology 'source'
        description: '
          Example of blue relationship color
          above muted color'
      },
      blue_target with {
        technology 'target'
        description: '
          Example of blue relationship color
          above blue color'
      }
  }
  view relationship_blue_target of blue_target {
    include relationship_colors,
      blue_source with {
        technology 'source'
        description: '
          Example of blue relationship color
          above muted color'
      },
      blue_target with {
        technology 'target'
        description: '
          Example of blue relationship color
          above blue color'
      }
    style relationship_colors {
      color blue
    }
  }

  view relationship_secondary of secondary_source {
    include relationship_colors,
      secondary_source with {
        technology 'source'
        description: '
          Example of secondary relationship color
          above muted color'
      },
      secondary_target with {
        technology 'target'
        description: '
          Example of secondary relationship color
          above secondary color'
      }
  }
  view relationship_secondary_target of secondary_target {
    include relationship_colors,
      secondary_source with {
        technology 'source'
        description: '
          Example of secondary relationship color
          above muted color'
      },
      secondary_target with {
        technology 'target'
        description: '
          Example of secondary relationship color
          above secondary color'
      }
    style relationship_colors {
      color secondary
    }
  }

  view relationship_sky of sky_source {
    include relationship_colors,
      sky_source with {
        technology 'source'
        description: '
          Example of sky relationship color
          above muted color'
      },
      sky_target with {
        technology 'target'
        description: '
          Example of sky relationship color
          above sky color'
      }
  }
  view relationship_sky_target of sky_target {
    include relationship_colors,
      sky_source with {
        technology 'source'
        description: '
          Example of sky relationship color
          above muted color'
      },
      sky_target with {
        technology 'target'
        description: '
          Example of sky relationship color
          above sky color'
      }
    style relationship_colors {
      color sky
    }
  }

  view relationship_muted of muted_source {
    include relationship_colors,
      muted_source with {
        technology 'source'
        description: '
          Example of muted relationship color
          above muted color'
      },
      muted_target with {
        technology 'target'
        description: '
          Example of muted relationship color
          above muted color'
      }
  }
  view relationship_muted_target of muted_target {
    include relationship_colors,
      muted_source with {
        technology 'source'
        description: '
          Example of muted relationship color
          above muted color'
      },
      muted_target with {
        technology 'target'
        description: '
          Example of muted relationship color
          above muted color'
      }
    style relationship_colors {
      color muted
    }
  }

  view relationship_slate of slate_source {
    include relationship_colors,
      slate_source with {
        technology 'source'
        description: '
          Example of slate relationship color
          above muted color'
      },
      slate_target with {
        technology 'target'
        description: '
          Example of slate relationship color
          above slate color'
      }
  }
  view relationship_slate_target of slate_target {
    include relationship_colors,
      slate_source with {
        technology 'source'
        description: '
          Example of slate relationship color
          above muted color'
      },
      slate_target with {
        technology 'target'
        description: '
          Example of slate relationship color
          above slate color'
      }
    style relationship_colors {
      color slate
    }
  }

  view relationship_gray of gray_source {
    include relationship_colors,
      gray_source with {
        technology 'source'
        description: '
          Example of gray relationship color
          above muted color'
      },
      gray_target with {
        technology 'target'
        description: '
          Example of gray relationship color
          above gray color'
      }
  }
  view relationship_gray_target of gray_target {
    include relationship_colors,
      gray_source with {
        technology 'source'
        description: '
          Example of gray relationship color
          above muted color'
      },
      gray_target with {
        technology 'target'
        description: '
          Example of gray relationship color
          above gray color'
      }
    style relationship_colors {
      color gray
    }
  }

  view relationship_red of red_source {
    include relationship_colors,
      red_source with {
        technology 'source'
        description: '
          Example of red relationship color
          above muted color'
      },
      red_target with {
        technology 'target'
        description: '
          Example of red relationship color
          above red color'
      }
  }
  view relationship_red_target of red_target {
    include relationship_colors,
      red_source with {
        technology 'source'
        description: '
          Example of red relationship color
          above muted color'
      },
      red_target with {
        technology 'target'
        description: '
          Example of red relationship color
          above red color'
      }
    style relationship_colors {
      color red
    }
  }

  view relationship_green of green_source {
    include relationship_colors,
      green_source with {
        technology 'source'
        description: '
          Example of green relationship color
          above muted color'
      },
      green_target with {
        technology 'target'
        description: '
          Example of green relationship color
          above green color'
      }
  }
  view relationship_green_target of green_target {
    include relationship_colors,
      green_source with {
        technology 'source'
        description: '
          Example of green relationship color
          above muted color'
      },
      green_target with {
        technology 'target'
        description: '
          Example of green relationship color
          above green color'
      }
    style relationship_colors {
      color green
    }
  }

  view relationship_amber of amber_source {
    include relationship_colors,
      amber_source with {
        technology 'source'
        description: '
          Example of amber relationship color
          above muted color'
      },
      amber_target with {
        technology 'target'
        description: '
          Example of amber relationship color
          above amber color'
      }
  }
  view relationship_amber_target of amber_target {
    include relationship_colors,
      amber_source with {
        technology 'source'
        description: '
          Example of amber relationship color
          above muted color'
      },
      amber_target with {
        technology 'target'
        description: '
          Example of amber relationship color
          above amber color'
      }
    style relationship_colors {
      color amber
    }
  }

  view relationship_indigo of indigo_source {
    include relationship_colors,
      indigo_source with {
        technology 'source'
        description: '
          Example of indigo relationship color
          above muted color'
      },
      indigo_target with {
        technology 'target'
        description: '
          Example of indigo relationship color
          above indigo color'
      }
  }
  view relationship_indigo_target of indigo_target {
    include relationship_colors,
      indigo_source with {
        technology 'source'
        description: '
          Example of indigo relationship color
          above muted color'
      },
      indigo_target with {
        technology 'target'
        description: '
          Example of indigo relationship color
          above indigo color'
      }
    style relationship_colors {
      color indigo
    }
  }


}
Edit Report
Pub: 05 Feb 2025 18:46 UTC
Edit: 05 Feb 2025 19:07 UTC
Views: 36