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="<language> <version>"/>
</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
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 | 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
}
}
}
|