{
"$schema": "https://json-schema.org/draft/2020-12/schema",
"title": "InputDiagram",
"description": "The kinds of diagrams that can be generated.\n\nThis is the root data structure for diagram input, containing all\nconfiguration for things, their relationships, processes, tags, styling,\nand themes.",
"type": "object",
"properties": {
"css": {
"description": "Additional CSS to place in the SVG's inline `<styles>` section.",
"$ref": "#/$defs/Css"
},
"edge_descs": {
"description": "Descriptions to render next to edges and edge groups.",
"$ref": "#/$defs/EdgeDescs"
},
"edge_labels": {
"description": "Text labels for edges at each endpoint.\n\nEach entry maps an edge instance ID to its `from` and `to` endpoint\nlabels. Both labels may be set independently, allowing the source and\ndestination context to be described with different text.",
"$ref": "#/$defs/EdgeLabels"
},
"entity_tooltips": {
"description": "Tooltips for entities (nodes, edges, and edge groups).\n\nContains plain text that provides additional context about entities in\nthe diagram, such as process steps.",
"$ref": "#/$defs/EntityTooltips"
},
"entity_types": {
"description": "Additional `type`s attached to entities for common styling.\n\nEach entity can have multiple types, allowing styles to be stacked.\nThese types are appended to the entity's computed default type.",
"$ref": "#/$defs/EntityTypes"
},
"processes": {
"description": "Processes are groupings of interactions between things sequenced over\ntime.",
"$ref": "#/$defs/Processes"
},
"render_options": {
"description": "Options that control how the diagram is rendered.\n\nIncludes edge curvature and rank direction settings.",
"$ref": "#/$defs/RenderOptions"
},
"tag_things": {
"description": "Things associated with each tag.",
"$ref": "#/$defs/TagThings"
},
"tags": {
"description": "Tags are labels that can be associated with things, so that the things\ncan be highlighted when the tag is focused.",
"$ref": "#/$defs/TagNames"
},
"theme_default": {
"description": "Default theme styles when the diagram has no user interaction.",
"$ref": "#/$defs/ThemeDefault"
},
"theme_tag_things_focus": {
"description": "Styles when a tag is focused.\n\nThe `tag_defaults` key applies styles to all tags uniformly.\nSpecific tag IDs can be used to override defaults for particular tags.",
"$ref": "#/$defs/ThemeTagThingsFocus"
},
"theme_thing_dependencies_styles": {
"description": "Styles when a `thing` is focused to show its dependencies.",
"$ref": "#/$defs/ThemeThingDependenciesStyles"
},
"theme_types_styles": {
"description": "Styles applied to things / edges of a particular `type`.",
"$ref": "#/$defs/ThemeTypesStyles"
},
"thing_copy_text": {
"description": "Text to copy to clipboard when a thing's copy button is clicked.\n\nThis allows things to have different copy text than their display label.",
"$ref": "#/$defs/ThingCopyText"
},
"thing_dependencies": {
"description": "Dependencies between things (static relationships).\n\nWhen B depends on A, it means A must exist before B.\nChanges to A means B is out of date.",
"$ref": "#/$defs/ThingDependencies"
},
"thing_descs": {
"description": "Descriptions to render next to things in the diagram.",
"$ref": "#/$defs/ThingDescs"
},
"thing_interactions": {
"description": "Interactions between things (communication between applications).\n\nHas the same structure as dependencies but represents runtime\ncommunication rather than static dependencies.",
"$ref": "#/$defs/ThingInteractions"
},
"thing_layouts": {
"description": "User-specified flex-direction overrides for container things.\n\nWhen a thing has children in `things`, the layout engine\narranges them in alternating row/column directions by default. Entries\nhere override that default for the specified thing.\n\nValid values: `\"row\"`, `\"row_reverse\"`, `\"column\"`, `\"column_reverse\"`.",
"$ref": "#/$defs/ThingLayouts"
},
"thing_names": {
"description": "Display labels for things, keyed by `ThingId`.\n\nEntries are optional: a thing without an entry here uses its `ThingId`\nas its display label.",
"$ref": "#/$defs/ThingNames"
},
"things": {
"description": "Things in the diagram, as a recursive hierarchy / nesting tree.\n\nThis is the single source of truth for which things exist in the\ndiagram: a `thing` is rendered as a node when its `ThingId` appears\nhere. The nesting also affects visual containment in the diagram.\n\nDisplay labels are looked up separately in `thing_names`, defaulting\nto the `ThingId` when no entry exists.",
"$ref": "#/$defs/ThingHierarchy"
}
},
"$defs": {
"Css": {
"description": "Additional CSS to place in the SVG's inline `<styles>` section.\n\nThis allows for custom CSS rules such as keyframe animations that\ncannot be expressed through Tailwind classes alone.\n\n# Example\n\n```yaml\ncss: >-\n @keyframes stroke-dashoffset-move {\n 0% { stroke-dasharray: 3; stroke-dashoffset: 30; }\n 100% { stroke-dasharray: 3; stroke-dashoffset: 0; }\n }\n @keyframes stroke-dashoffset-move-request {\n 0% { stroke-dashoffset: 0; }\n 100% { stroke-dashoffset: 228; }\n }\n```",
"type": "string"
},
"CssClassPartials": {
"description": "Partial CSS class name for each theme attribute. `Map<ThemeAttr,\nString>` newtype.\n\nThese are *partial* CSS utility class names as an entry may be\n`StrokeColorNormal: \"slate-600\"`, whereas the final CSS class name\nmay be `\"[&>path]:stroke-slate-600\"`.\n\nAlso, one CSS class partial may used to compute multiple CSS classes, such\nas `StrokeColor: \"slate\"` mapping to:\n\n* `\"stroke-slate-600\"`\n* `\"focus:stroke-slate-500\"`\n* `\"hover:stroke-slate-400\"`\n* `\"focus:hover:stroke-slate-400\"`\n\n# Example\n\n```yaml\nnode_defaults: # <-- this is a `CssClassPartials` map\n style_aliases_applied: [shade_light]\n shape_color: \"slate\"\n stroke_style: \"solid\"\n stroke_width: \"1\"\n visibility: \"visible\"\n fill_shade_normal: \"300\"\n fill_shade_hover: \"200\"\n fill_shade_focus: \"400\"\n fill_shade_active: \"500\"\n stroke_shade_normal: \"400\"\n text_shade: \"900\"\n```",
"type": "object",
"properties": {
"style_aliases_applied": {
"description": "The style aliases applied to the CSS class partials.",
"type": "array",
"default": [],
"items": {
"$ref": "#/$defs/StyleAlias"
}
}
},
"additionalProperties": {
"type": "string"
},
"propertyNames": {
"$ref": "#/$defs/ThemeAttr"
}
},
"DarkModeConfig": {
"description": "Configuration for dark mode behavior.\n\nGroups the shade adjustment strategy (`shade`) and the CSS selector\nstrategy (`selector`) used when emitting dark-mode styles.\n\n# Examples\n\n```yaml\ndark_mode_config:\n shade:\n mode: invert\n selector: root_dark_class\n```\n\n```yaml\ndark_mode_config:\n shade:\n mode: shift\n levels: 4\n selector: media_query\n```",
"type": "object",
"properties": {
"selector": {
"description": "CSS selector strategy for the dark-mode variable overrides.\n\nDefaults to `DarkModeCssSelector::RootDarkClass`.",
"$ref": "#/$defs/DarkModeCssSelector",
"default": "root_dark_class"
},
"shade": {
"description": "How fill, stroke, and text shades are adjusted for dark mode.\n\nDefaults to `DarkModeShadeConfig::Invert`.",
"$ref": "#/$defs/DarkModeShadeConfig",
"default": {
"mode": "invert"
}
}
}
},
"DarkModeCssSelector": {
"description": "CSS selector strategy for applying dark-mode colour overrides.\n\nControls how the dark-mode CSS variable block is targeted in the\ngenerated SVG styles.\n\n# Variants\n\n* `MediaQuery`: uses `@media (prefers-color-scheme: dark) { svg { .. } }`.\n* `RootDarkClass`: uses `:root.dark svg { .. }`, which allows a surrounding\n page to toggle dark mode via a `dark` class on `<html>`.\n\nDefaults to `DarkModeCssSelector::RootDarkClass`.\n\n# Examples\n\n```yaml\nselector: media_query\n```\n\n```yaml\nselector: root_dark_class\n```",
"oneOf": [
{
"description": "Uses `@media (prefers-color-scheme: dark) { svg { .. } }`.\n\nThe browser automatically switches based on the OS / browser\npreference.",
"type": "string",
"const": "media_query"
},
{
"description": "Uses `:root.dark svg { .. }`.\n\nAllows a surrounding website to control dark mode by toggling a\n`dark` class on the `<html>` element.",
"type": "string",
"const": "root_dark_class"
}
]
},
"DarkModeShadeConfig": {
"description": "Configuration for how shades are adjusted for dark mode.\n\nControls the dark-mode counterpart of fill, stroke, and text shades.\n\n# Variants\n\n* `Disable`: no dark mode classes are emitted.\n* `Invert`: shades are mirrored around 500 (e.g. 100 becomes 900).\n* `Shift`: shades are shifted by a number of levels (e.g. 100 shifted darker\n by 4 levels becomes 500).\n\nDefaults to `DarkModeShadeConfig::Invert`.\n\n# Examples\n\n```yaml\ndark_mode_shade_config:\n mode: disable\n```\n\n```yaml\ndark_mode_shade_config:\n mode: invert\n```\n\n```yaml\ndark_mode_shade_config:\n mode: shift\n levels: 4\n```",
"oneOf": [
{
"description": "Disables dark mode tailwind classes from being added.",
"type": "object",
"properties": {
"mode": {
"type": "string",
"const": "disable"
}
},
"required": [
"mode"
]
},
{
"description": "Inverts the shades -- mirrors around 500.\n\nFor example, shade `100` becomes `900`, and `200` becomes `800`.",
"type": "object",
"properties": {
"mode": {
"type": "string",
"const": "invert"
}
},
"required": [
"mode"
]
},
{
"description": "Shifts shades by a specified number of levels.\n\nThe direction of the shift (darker or lighter) is determined\nautomatically based on whether the light-mode shades lean light or\ndark.\n\nFor example, with `levels: 4`, a light-mode shade of `100` (index 1)\nshifted darker becomes `500` (index 5).",
"type": "object",
"properties": {
"levels": {
"description": "Number of shade levels to shift.\n\ne.g. `4`",
"type": "integer",
"format": "uint8",
"maximum": 255,
"minimum": 0
},
"mode": {
"type": "string",
"const": "shift"
}
},
"required": [
"mode",
"levels"
]
}
]
},
"EdgeCurvature": {
"description": "Controls how edge paths are drawn between nodes.\n\n# Examples\n\n```rust\nuse disposition_model_common::edge::EdgeCurvature;\n\nlet curved = EdgeCurvature::Curved;\nlet ortho = EdgeCurvature::Orthogonal;\n```",
"oneOf": [
{
"description": "Edges use smooth bezier curves between nodes and spacers.",
"type": "string",
"const": "curved"
},
{
"description": "Edges use orthogonal (90-degree) lines between nodes and spacers.\n\nCorners where the path changes from horizontal to vertical (or\nvice versa) are rounded with a small arc.",
"type": "string",
"const": "orthogonal"
}
]
},
"EdgeDescs": {
"description": "Descriptions for edges and edge groups.\n\nThis map contains text (typically markdown) that provides additional\ncontext about edges in the diagram. These descriptions can be displayed\nwhen an edge or edge group is focused.\n\n# Example\n\n```yaml\nedge_descs:\n # edge groups\n #\n # Shown when any of the edges in this group are focused.\n edge_t_localhost__t_github_user_repo__pull: |-\n Fetch from GitHub\n\n # edges\n edge_t_localhost__t_github_user_repo__pull__0: |-\n `git pull`\n```",
"type": "object",
"additionalProperties": {
"type": "string"
}
},
"EdgeGroup": {
"description": "An edge group combining an [`EdgeKind`] with the list of things it connects.\n\n# Examples\n\n```yaml\nthing_dependencies:\n edge_dep_t_localhost__t_github_user_repo__pull:\n kind: cyclic\n things:\n - t_localhost\n - t_github_user_repo\n\n edge_dep_t_localhost__t_github_user_repo__push:\n kind: sequence\n things:\n - t_localhost\n - t_github_user_repo\n\n edge_dep_t_github_user_repo__t_github_user_repo__within:\n kind: symmetric\n things:\n - t_github_user_repo\n```",
"type": "object",
"properties": {
"kind": {
"description": "The kind of edge -- cyclic, sequence, or symmetric.",
"$ref": "#/$defs/EdgeKind"
},
"things": {
"description": "The things involved in this edge group.",
"type": "array",
"default": [],
"items": {
"$ref": "#/$defs/ThingId"
}
}
},
"required": [
"kind"
]
},
"EdgeGroupId": {
"description": "Unique identifier for an edge group in the diagram, [`Id`] newtype.\n\nEdge groups contain one or more edges.\n\nMust begin with a letter or underscore, and contain only letters, numbers,\nand underscores.\n\n# Examples\n\n```rust\nuse disposition_model_common::{edge::EdgeGroupId, id, Id};\n\nlet edge_group_id: EdgeGroupId = id!(\"edge_t_localhost__t_github_user_repo__pull\").into();\n\nassert_eq!(\n edge_group_id.as_str(),\n \"edge_t_localhost__t_github_user_repo__pull\"\n);\n```",
"$ref": "#/$defs/Id"
},
"EdgeKind": {
"description": "Specifies the kind of edge.\n\nEdges can be either cyclic (forming a loop), sequential (one-way chain),\nor symmetric (forward then reverse).\n\n# Examples\n\nValid string representations (snake_case):\n\n* `\"cyclic\"`\n* `\"sequence\"`\n* `\"symmetric\"`",
"oneOf": [
{
"description": "Last thing in the list has an edge back to first thing.\n\nShould have at least one `thing`. When there is only one thing,\nit represents a self-loop.",
"type": "string",
"const": "cyclic"
},
{
"description": "A sequence of 2 or more things forming a one-way chain.\n\nThe edge goes from the first thing to the second, second to third, etc.",
"type": "string",
"const": "sequence"
},
{
"description": "A symmetric edge where things connect forward then back.\n\nFor a list of things A, B, C, the edges are: A -> B -> C -> B -> A.\nShould have at least one `thing`. When there is only one thing,\nit represents a request and response to itself.",
"type": "string",
"const": "symmetric"
}
]
},
"EdgeLabel": {
"description": "Text labels displayed at each endpoint of a diagram edge.\n\nBoth endpoints may show different text, allowing the source and destination\ncontext to be described independently.\n\n# Examples\n\n```yaml\nedge_labels:\n edge_t_localhost__t_github_user_repo__pull__0:\n from: \"local branch\"\n to: \"remote branch\"\n```",
"type": "object",
"properties": {
"from": {
"description": "Text label displayed near the `from` endpoint of the edge.\n\nMay be empty if no label is needed at the source.",
"type": "string"
},
"to": {
"description": "Text label displayed near the `to` endpoint of the edge.\n\nMay be empty if no label is needed at the destination.",
"type": "string"
}
}
},
"EdgeLabels": {
"description": "Text labels for edges at each endpoint.\n\nEach entry maps an edge instance ID to its `from` and `to` endpoint labels.\nBoth labels are optional -- set them to an empty string to show no text at\nthat endpoint.\n\n# Example\n\n```yaml\nedge_labels:\n edge_t_localhost__t_github_user_repo__pull__0:\n from: \"local branch\"\n to: \"remote branch\"\n edge_t_localhost__t_github_user_repo__push__0:\n from: \"local commit\"\n to: \"\"\n```",
"type": "object",
"additionalProperties": {
"$ref": "#/$defs/EdgeLabel"
}
},
"EntityTooltips": {
"description": "Tooltips for entities.\n\nThis map contains text (typically markdown) that provides additional\ncontext about entities in the diagram. These tooltips are displayed\nwhen an entity is hovered.\n\n# Example\n\n```yaml\nentity_tooltips:\n # process_steps\n proc_app_dev_step_repository_clone: |-\n ```bash\n git clone https://github.com/azriel91/web_app.git\n ```\n```",
"type": "object",
"additionalProperties": {
"type": "string"
}
},
"EntityType": {
"description": "Type for categorizing entities so they can all be styled consistently.\n\nEntities can have multiple types, and later types' styles override earlier\nones.\n\nThis enum contains well-known type keys, with a `Custom` variant\nfor user-defined types.\n\n# Examples\n\n```rust\nuse disposition_model_common::entity::EntityType;\n\nlet entity_type = EntityType::ThingDefault;\nassert_eq!(entity_type.as_str(), \"type_thing_default\");\n\nlet custom_alias = EntityType::Custom(\"type_server\".parse().unwrap());\nassert_eq!(custom_alias.as_str(), \"type_server\");\n```",
"oneOf": [
{
"description": "Inbuilt container.",
"type": "string",
"const": "container_inbuilt"
},
{
"description": "Default type for things",
"type": "string",
"const": "type_thing_default"
},
{
"description": "Default type for tags",
"type": "string",
"const": "type_tag_default"
},
{
"description": "Default type for processes",
"type": "string",
"const": "type_process_default"
},
{
"description": "Default type for process_steps",
"type": "string",
"const": "type_process_step_default"
},
{
"description": "Default type for dependency sequence edge groups",
"type": "string",
"const": "type_dependency_edge_sequence_default"
},
{
"description": "Default type for dependency cyclic edge groups",
"type": "string",
"const": "type_dependency_edge_cyclic_default"
},
{
"description": "Default type for dependency symmetric edge groups",
"type": "string",
"const": "type_dependency_edge_symmetric_default"
},
{
"description": "Default type for dependency sequence edges",
"type": "string",
"const": "type_dependency_edge_sequence_forward_default"
},
{
"description": "Default type for dependency cyclic edges",
"type": "string",
"const": "type_dependency_edge_cyclic_forward_default"
},
{
"description": "Default type for dependency symmetric forward edges",
"type": "string",
"const": "type_dependency_edge_symmetric_forward_default"
},
{
"description": "Default type for dependency symmetric reverse edges",
"type": "string",
"const": "type_dependency_edge_symmetric_reverse_default"
},
{
"description": "Default type for interaction sequence edge groups",
"type": "string",
"const": "type_interaction_edge_sequence_default"
},
{
"description": "Default type for interaction cyclic edge groups",
"type": "string",
"const": "type_interaction_edge_cyclic_default"
},
{
"description": "Default type for interaction symmetric edge groups",
"type": "string",
"const": "type_interaction_edge_symmetric_default"
},
{
"description": "Default type for interaction sequence edges",
"type": "string",
"const": "type_interaction_edge_sequence_forward_default"
},
{
"description": "Default type for interaction cyclic edges",
"type": "string",
"const": "type_interaction_edge_cyclic_forward_default"
},
{
"description": "Default type for interaction symmetric forward edges",
"type": "string",
"const": "type_interaction_edge_symmetric_forward_default"
},
{
"description": "Default type for interaction symmetric reverse edges",
"type": "string",
"const": "type_interaction_edge_symmetric_reverse_default"
},
{
"description": "Custom user-defined type.",
"type": "string"
}
]
},
"EntityTypes": {
"description": "Entity types attached to things, edges, processes, process steps and tags\nfor common styling.\n\nEach entity can have multiple types, allowing styles to be stacked.\nThe types are appended to the entity's default type (e.g.\n`type_thing_default` for things, `type_tag_default` for tags, etc.).\n\nBuilt-in types that are automatically attached to entities unless\noverridden:\n\n* `type_thing_default`\n* `type_tag_default`\n* `type_process_default`\n* `type_process_step_default`\n\nFor edges, an edge group is generated for each dependency / interaction:\n\nEach edge group is assigned a type from the following:\n\n* `type_dependency_edge_sequence_default`\n* `type_dependency_edge_cyclic_default`\n* `type_dependency_edge_symmetric_default`\n* `type_interaction_edge_sequence_default`\n* `type_interaction_edge_cyclic_default`\n* `type_interaction_edge_symmetric_default`\n\nand each edge within each edge group is assigned a type from the following:\n\n* `type_dependency_edge_sequence_forward_default`\n* `type_dependency_edge_cyclic_forward_default`\n* `type_dependency_edge_symmetric_forward_default`\n* `type_dependency_edge_symmetric_reverse_default`\n* `type_interaction_edge_sequence_forward_default`\n* `type_interaction_edge_cyclic_forward_default`\n* `type_interaction_edge_symmetric_forward_default`\n* `type_interaction_edge_symmetric_reverse_default`\n\nThe edge ID is the edge group ID specified in `thing_dependencies` /\n`thing_interactions`, suffixed with the zero-based index of the edge like\nso:\n\n```text\nedge_id = edge_group_id + \"__\" + edge_index\n```\n\n# Example\n\n```yaml\nentity_types:\n # things - types are appended to type_thing_default\n t_aws:\n - type_organisation\n t_aws_iam:\n - type_service\n t_aws_ecr:\n - type_service\n t_aws_ecr_repo_image_1:\n - type_docker_image\n t_aws_ecr_repo_image_2:\n - type_docker_image\n t_github:\n - type_organisation\n\n # tags - types are appended to type_tag_default\n tag_app_development:\n - tag_type_default\n\n # edges - types are appended to the edge's default type\n edge_t_localhost__t_github_user_repo__pull__0:\n - type_dependency_edge_cyclic_forward_default\n edge_t_localhost__t_github_user_repo__pull__1:\n - type_dependency_edge_cyclic_forward_default\n```",
"type": "object",
"additionalProperties": {
"type": "array",
"items": {
"$ref": "#/$defs/EntityType"
},
"uniqueItems": true
}
},
"FlexDirection": {
"description": "Direction for flex layout of child nodes.\n\nThis enum maps to CSS flexbox `flex-direction` values and determines\nhow child nodes are arranged within their parent container.\n\n# YAML values\n\n* `\"row\"`: Items are placed left to right.\n* `\"row_reverse\"`: Items are placed right to left.\n* `\"column\"`: Items are placed top to bottom.\n* `\"column_reverse\"`: Items are placed bottom to top.",
"oneOf": [
{
"description": "Items are placed left to right in a row.",
"type": "string",
"const": "row"
},
{
"description": "Items are placed right to left in a row.",
"type": "string",
"const": "row_reverse"
},
{
"description": "Items are placed top to bottom in a column.",
"type": "string",
"const": "column"
},
{
"description": "Items are placed bottom to top in a column.",
"type": "string",
"const": "column_reverse"
}
]
},
"Id": {
"description": "Unique identifier for any entity in the diagram, `Cow<'s, str>`\nnewtype.\n\nMust begin with a letter or underscore, and contain only letters, numbers,\nand underscores.\n\n# Examples\n\n```rust\nuse disposition_model_common::{id, Id};\n\nlet id_compile_time_checked = id!(\"example_id\");\nlet id_runtime_checked = Id::new(\"example_id\").unwrap();\n\nassert_eq!(id_compile_time_checked, id_runtime_checked);\nassert_eq!(id_runtime_checked.as_str(), \"example_id\");\n```",
"type": "string"
},
"ProcessDiagram": {
"description": "Represents a process with its steps and associated metadata.\n\nA process is a grouping of interactions between things sequenced over time.\nIt contains the process name, optional description, steps, step\ndescriptions, and the thing interactions associated with each step.\n\n# Example\n\n```yaml\nprocesses:\n proc_app_dev: # <-- this is a `ProcessDiagram`\n name: \"App Development\"\n desc: |-\n Development of the web application.\n\n * [🐙 Repo](https://github.com/azriel91/web_app)\n steps:\n proc_app_dev_step_repository_clone: \"Clone repository\"\n proc_app_dev_step_project_build: \"Build project\"\n process_step_dependencies:\n proc_app_dev_step_project_build:\n - proc_app_dev_step_repository_clone\n step_descs:\n proc_app_dev_step_repository_clone: |-\n ```bash\n git clone https://github.com/azriel91/web_app.git\n ```\n proc_app_dev_step_project_build: |-\n Develop the app:\n\n * Always link to issue.\n * Open PR.\n step_thing_interactions:\n proc_app_dev_step_repository_clone: [edge_t_localhost__t_github_user_repo__pull]\n proc_app_dev_step_project_build: [edge_t_localhost__t_localhost__within]\n```",
"type": "object",
"properties": {
"desc": {
"description": "Optional description of the process.\n\nThis is intended to take markdown text.",
"type": [
"string",
"null"
]
},
"name": {
"description": "Display name of the process.",
"type": [
"string",
"null"
]
},
"process_step_dependencies": {
"description": "Dependencies between the steps in this process.\n\nEach process step maps to the set of process steps it depends on, which\nare positioned earlier in the process.",
"$ref": "#/$defs/ProcessStepDependencies"
},
"step_thing_interactions": {
"description": "Thing interactions that should be actively highlighted when each step is\nfocused.\n\nReferences IDs in `thing_interactions` top level element.",
"$ref": "#/$defs/StepThingInteractions"
},
"steps": {
"description": "Steps in the process and their display labels.",
"$ref": "#/$defs/ProcessSteps"
}
}
},
"ProcessRenderCollapse": {
"description": "Controls whether processes are rendered collapsed or expanded.\n\nA collapsed process only shows its label, and expands to reveal its steps\nwhen the process (or any of its steps) is focused. An expanded process\nalways shows all of its steps.\n\n# Examples\n\n```rust\nuse disposition_model_common::ProcessRenderCollapse;\n\nlet expand_when_one = ProcessRenderCollapse::ExpandWhenOne;\nlet expand_always = ProcessRenderCollapse::ExpandAlways;\nlet collapse = ProcessRenderCollapse::Collapse;\n```",
"oneOf": [
{
"description": "Processes are rendered expanded when there is only a single process in\nthe diagram, and collapsed otherwise.",
"type": "string",
"const": "expand_when_one"
},
{
"description": "Processes are always rendered fully expanded.",
"type": "string",
"const": "expand_always"
},
{
"description": "Processes are rendered collapsed, expanding only when focused.",
"type": "string",
"const": "collapse"
}
]
},
"ProcessStepDependencies": {
"description": "Dependencies between process steps.\n\nEach process step maps to the set of process steps it depends on (its\nprerequisites). A step is positioned after all of the steps it depends on.\n\nThis provides a first-class way to define ordering between process steps,\ninstead of encoding process step IDs within `thing_dependencies`.\n\n# Example\n\n```yaml\nprocesses:\n proc_app_dev: # <-- this is a `ProcessDiagram`\n steps:\n proc_app_dev_step_repository_clone: \"Clone repository\"\n proc_app_dev_step_project_build: \"Build project\"\n process_step_dependencies: # <-- this is a `ProcessStepDependencies`\n proc_app_dev_step_project_build:\n - proc_app_dev_step_repository_clone\n```",
"type": "object",
"additionalProperties": {
"type": "array",
"items": {
"$ref": "#/$defs/ProcessStepId"
},
"uniqueItems": true
}
},
"ProcessStepId": {
"description": "Unique identifier for a process step in the diagram, [`Id`] newtype.\n\nMust begin with a letter or underscore, and contain only letters, numbers,\nand underscores.\n\n# Examples\n\n```rust\nuse disposition_input_model::process::ProcessStepId;\nuse disposition_model_common::{id, Id};\n\nlet step_id: ProcessStepId = id!(\"step_clone_repo\").into();\n\nassert_eq!(step_id.as_str(), \"step_clone_repo\");\n```",
"$ref": "#/$defs/Id"
},
"ProcessSteps": {
"description": "Steps in a process and their display labels.\n\nThis map defines the `ProcessStepId`s and their display names, representing\nthe ordered sequence of steps within a process.\n\n# Example\n\n```yaml\nprocesses:\n proc_app_dev:\n steps: # <-- this is a `ProcessSteps`\n proc_app_dev_step_repository_clone: \"Clone repository\"\n proc_app_dev_step_project_build: \"Build project\"\n```",
"type": "object",
"additionalProperties": {
"type": "string"
}
},
"Processes": {
"description": "Processes are groupings of interactions between things sequenced over time.\n\nWe want to make it easy to see which things are involved (in each step of) a\nprocess. By highlighting the things / edges when a user focuses on a step in\na process, it brings clarity to the user.\n\n# Example\n\n```yaml\nprocesses:\n proc_app_dev:\n name: \"App Development\"\n desc: |-\n Development of the web application.\n steps:\n proc_app_dev_step_repository_clone: \"Clone repository\"\n proc_app_dev_step_project_build: \"Build project\"\n step_descs:\n proc_app_dev_step_repository_clone: |-\n ```bash\n git clone https://github.com/azriel91/web_app.git\n ```\n step_thing_interactions:\n proc_app_dev_step_repository_clone: [edge_t_localhost__t_github_user_repo__pull]\n proc_app_dev_step_project_build: [edge_t_localhost__t_localhost__within]\n\n proc_app_release:\n name: \"App Release\"\n steps:\n proc_app_release_step_tag_and_push: \"Tag and push\"\n```",
"type": "object",
"additionalProperties": {
"$ref": "#/$defs/ProcessDiagram"
}
},
"RankDir": {
"description": "Direction that edges are laid out in.\n\n# Variants\n\n* `left_to_right`: edges connect nodes from left to right.\n* `right_to_left`: edges connect nodes from right to left.\n* `top_to_bottom`: edges connect nodes from top to bottom.\n* `bottom_to_top`: edges connect nodes from bottom to top.",
"oneOf": [
{
"description": "Connect nodes from left to right.",
"type": "string",
"const": "left_to_right"
},
{
"description": "Connect nodes from right to left.",
"type": "string",
"const": "right_to_left"
},
{
"description": "Connect nodes from top to bottom.",
"type": "string",
"const": "top_to_bottom"
},
{
"description": "Connect nodes from bottom to top.",
"type": "string",
"const": "bottom_to_top"
}
]
},
"RenderOptions": {
"description": "Options that control how the diagram is rendered.\n\n# Examples\n\n```rust\nuse disposition_model_common::RenderOptions;\n\nlet render_options = RenderOptions::default();\nassert_eq!(render_options.edge_curvature, Default::default());\nassert_eq!(render_options.rank_dir, Default::default());\nassert_eq!(render_options.process_render_collapse, Default::default());\n```",
"type": "object",
"properties": {
"edge_curvature": {
"description": "Controls how edge paths are drawn between nodes.\n\n* `EdgeCurvature::Curved`: edges use smooth bezier curves.\n* `EdgeCurvature::Orthogonal`: edges use orthogonal 90-degree lines.",
"$ref": "#/$defs/EdgeCurvature"
},
"process_render_collapse": {
"description": "Controls whether processes are rendered collapsed or expanded.\n\n* `ProcessRenderCollapse::Collapse`: processes are rendered collapsed,\n expanding only when focused.\n* `ProcessRenderCollapse::ExpandAlways`: processes are always rendered\n fully expanded.\n* `ProcessRenderCollapse::ExpandWhenOne`: processes are rendered\n expanded when there is only a single process in the diagram, and\n collapsed otherwise.",
"$ref": "#/$defs/ProcessRenderCollapse"
},
"rank_dir": {
"description": "Direction of edges in the diagram.\n\n* `RankDir::LeftToRight`: edges connect nodes from left to right.\n* `RankDir::RightToLeft`: edges connect nodes from right to left.\n* `RankDir::TopToBottom`: edges connect nodes from top to bottom.\n* `RankDir::BottomToTop`: edges connect nodes from bottom to top.",
"$ref": "#/$defs/RankDir"
}
}
},
"StepThingInteractions": {
"description": "Thing interactions that should be actively highlighted when a step is\nfocused.\n\nThe things associated with all of the interaction IDs in the list should be\nhighlighted when viewing this step.\n\n# Example\n\n```yaml\nprocesses:\n proc_app_dev: # <-- this is a `ProcessDiagram`\n step_thing_interactions: # <-- this is a `StepThingInteractions`\n proc_app_dev_step_repository_clone: [edge_t_localhost__t_github_user_repo__pull]\n proc_app_dev_step_project_build: [edge_t_localhost__t_localhost__within]\n```",
"type": "object",
"additionalProperties": {
"type": "array",
"items": {
"$ref": "#/$defs/EdgeGroupId"
}
}
},
"StyleAlias": {
"description": "Style alias for grouping style properties under a single name.\n\nStyle aliases allow grouping of style properties under a single name,\nwhich can then be applied to nodes and edges using `style_aliases_applied`.\n\nThis enum contains well-known style alias keys, with a `Custom` variant\nfor user-defined aliases.\n\n# Examples\n\n```rust\nuse disposition_input_model::theme::StyleAlias;\n\nlet style_alias = StyleAlias::<'static>::PaddingNormal;\nassert_eq!(style_alias.as_str(), \"padding_normal\");\n\nlet custom_alias = StyleAlias::Custom(\"my_custom_style\".parse().unwrap());\nassert_eq!(custom_alias.as_str(), \"my_custom_style\");\n```",
"oneOf": [
{
"description": "Extra small circle (radius 2 units).",
"type": "string",
"const": "circle_xs"
},
{
"description": "Small circle (radius 4 units).",
"type": "string",
"const": "circle_sm"
},
{
"description": "Medium circle (radius 8 units).",
"type": "string",
"const": "circle_md"
},
{
"description": "Large circle (radius 12 units).",
"type": "string",
"const": "circle_lg"
},
{
"description": "Extra large circle (radius 16 units).",
"type": "string",
"const": "circle_xl"
},
{
"description": "No padding.",
"type": "string",
"const": "padding_none"
},
{
"description": "Tight padding (2 units).",
"type": "string",
"const": "padding_tight"
},
{
"description": "Normal padding (4 units).",
"type": "string",
"const": "padding_normal"
},
{
"description": "Wide padding (6 units).",
"type": "string",
"const": "padding_wide"
},
{
"description": "Extra small rounded corners (2 units).",
"type": "string",
"const": "rounded_xs"
},
{
"description": "Small rounded corners (4 units).",
"type": "string",
"const": "rounded_sm"
},
{
"description": "Medium rounded corners (6 units).",
"type": "string",
"const": "rounded_md"
},
{
"description": "Large rounded corners (8 units).",
"type": "string",
"const": "rounded_lg"
},
{
"description": "Extra large rounded corners (12 units).",
"type": "string",
"const": "rounded_xl"
},
{
"description": "2x extra large rounded corners (16 units).",
"type": "string",
"const": "rounded_2xl"
},
{
"description": "3x extra large rounded corners (24 units).",
"type": "string",
"const": "rounded_3xl"
},
{
"description": "4x extra large rounded corners (32 units).",
"type": "string",
"const": "rounded_4xl"
},
{
"description": "Pale fill shade (lightest fill, no stroke shades).",
"type": "string",
"const": "fill_pale"
},
{
"description": "Pale shade (lightest).",
"type": "string",
"const": "shade_pale"
},
{
"description": "Light shade.",
"type": "string",
"const": "shade_light"
},
{
"description": "Medium shade.",
"type": "string",
"const": "shade_medium"
},
{
"description": "Dark shade (darkest).",
"type": "string",
"const": "shade_dark"
},
{
"description": "Dashed stroke with animation.",
"type": "string",
"const": "stroke_dashed_animated"
},
{
"description": "Dashed stroke with animation for request direction.",
"type": "string",
"const": "stroke_dashed_animated_request"
},
{
"description": "Dashed stroke with animation for response direction.",
"type": "string",
"const": "stroke_dashed_animated_response"
},
{
"description": "Focus outline for nodes and edges.\n\nApplies a visible outline when the entity is focused or hovered,\nand hides it otherwise.",
"type": "string",
"const": "focus_outline"
},
{
"description": "Custom user-defined style alias.",
"type": "string"
}
]
},
"StyleAliases": {
"description": "A map of style aliases to their style property definitions.\n\nStyle aliases allow grouping of style properties under a single name,\nwhich can then be applied to nodes and edges using `style_aliases_applied`.\n\nThese are available to all other `theme_*` data.\n\n# Example\n\n```yaml\ntheme_default:\n style_aliases: # <-- this is a `StyleAliases`\n padding_none:\n padding: \"0.0\"\n gap: \"0.0\"\n padding_tight:\n padding: \"2.0\"\n gap: \"2.0\"\n padding_normal:\n padding: \"4.0\"\n gap: \"4.0\"\n padding_wide:\n padding: \"6.0\"\n gap: \"6.0\"\n shade_light:\n fill_shade_hover: \"200\"\n fill_shade_normal: \"300\"\n fill_shade_focus: \"400\"\n fill_shade_active: \"500\"\n stroke_shade_hover: \"300\"\n stroke_shade_normal: \"400\"\n stroke_shade_focus: \"500\"\n stroke_shade_active: \"600\"\n text_shade: \"900\"\n stroke_dashed_animated:\n stroke_style: \"dashed\"\n stroke_width: \"2\"\n animate: \"[stroke-dashoffset-move_2s_linear_infinite]\"\n```",
"type": "object",
"additionalProperties": {
"$ref": "#/$defs/CssClassPartials"
}
},
"TagId": {
"description": "Unique identifier for a tag in the diagram, [`Id`] newtype.\n\nMust begin with a letter or underscore, and contain only letters, numbers,\nand underscores.\n\n# Examples\n\n```rust\nuse disposition_input_model::tag::TagId;\nuse disposition_model_common::{id, Id};\n\nlet tag_id: TagId = id!(\"example_id\").into();\n\nassert_eq!(tag_id.as_str(), \"example_id\");\n```",
"$ref": "#/$defs/Id"
},
"TagNames": {
"description": "Tags are labels that can be associated with things, so that the things can\nbe highlighted when the tag is focused.\n\n# Example\n\n```yaml\ntags:\n tag_app_development: \"Application Development\"\n tag_deployment: \"Deployment\"\n tag_infrastructure: \"Infrastructure\"\n```",
"type": "object",
"additionalProperties": {
"type": "string"
}
},
"TagThings": {
"description": "Things associated with each tag.\n\nThis allows selection / highlighting of things that are related to each\nother when a tag is focused.\n\nIt is structured as a map from tag ID to a list of thing IDs, because\nspecifying the `things` for each tag is more natural than specifying the\ntags associated with each thing.\n\n# Example\n\n```yaml\ntag_things:\n tag_app_development:\n - t_github_user_repo\n - t_localhost\n tag_deployment:\n - t_aws_ecr_repo\n - t_github_user_repo\n```",
"type": "object",
"additionalProperties": {
"type": "array",
"items": {
"$ref": "#/$defs/ThingId"
},
"uniqueItems": true
}
},
"ThemeAttr": {
"description": "Themeable attributes of nodes and edges.\n\nThese keys are used by both nodes and edges.\n\n# Notes\n\n* `Extra` are classes that are copied as-is onto the relevant SVG/HTML\n elements.\n* `ShapeColor` controls the border and fill colours for nodes, and the line\n and arrow head colours for edges.\n* `Stroke*` keys control the border colour for nodes, and the line colour\n for edges.\n* `Fill*` keys control the background colour for nodes, and the arrow head\n fill colour for edges.\n* `Padding*` keys are only applicable to nodes.\n* `Margin*` keys are only applicable to nodes.\n\n# Highlight states\n\nHighlight states refer to whether a node is hovered, no interaction,\nselected, or active (pressed).\n\n# Colours\n\n[Colours] are from [Tailwind CSS]. The list of names are:\n\n* <span class=\"color-label\">key:</span> <span class=\"blk\"> 50</span>\n <span class=\"blk\">100</span> <span class=\"blk\">200</span> <span\n class=\"blk\">300</span> <span class=\"blk\">400</span> <span\n class=\"blk\">500</span> <span class=\"blk\">600</span> <span\n class=\"blk\">700</span> <span class=\"blk\">800</span> <span\n class=\"blk\">900</span> <span class=\"blk\">950</span>\n* <span class=\"color-label\">`slate`:</span> <span class=\"colorblk\"\n style=\"background-color: #f8fafc;\"></span> <span class=\"colorblk\"\n style=\"background-color: #f1f5f9;\"></span> <span class=\"colorblk\"\n style=\"background-color: #e2e8f0;\"></span> <span class=\"colorblk\"\n style=\"background-color: #cbd5e1;\"></span> <span class=\"colorblk\"\n style=\"background-color: #94a3b8;\"></span> <span class=\"colorblk\"\n style=\"background-color: #64748b;\"></span> <span class=\"colorblk\"\n style=\"background-color: #475569;\"></span> <span class=\"colorblk\"\n style=\"background-color: #334155;\"></span> <span class=\"colorblk\"\n style=\"background-color: #1e293b;\"></span> <span class=\"colorblk\"\n style=\"background-color: #0f172a;\"></span> <span class=\"colorblk\"\n style=\"background-color: #020617;\"></span>\n* <span class=\"color-label\">`gray`:</span> <span class=\"colorblk\"\n style=\"background-color: #f9fafb;\"></span> <span class=\"colorblk\"\n style=\"background-color: #f3f4f6;\"></span> <span class=\"colorblk\"\n style=\"background-color: #e5e7eb;\"></span> <span class=\"colorblk\"\n style=\"background-color: #d1d5db;\"></span> <span class=\"colorblk\"\n style=\"background-color: #9ca3af;\"></span> <span class=\"colorblk\"\n style=\"background-color: #6b7280;\"></span> <span class=\"colorblk\"\n style=\"background-color: #4b5563;\"></span> <span class=\"colorblk\"\n style=\"background-color: #374151;\"></span> <span class=\"colorblk\"\n style=\"background-color: #1f2937;\"></span> <span class=\"colorblk\"\n style=\"background-color: #111827;\"></span> <span class=\"colorblk\"\n style=\"background-color: #030712;\"></span>\n* <span class=\"color-label\">`zinc`:</span> <span class=\"colorblk\"\n style=\"background-color: #fafafa;\"></span> <span class=\"colorblk\"\n style=\"background-color: #f4f4f5;\"></span> <span class=\"colorblk\"\n style=\"background-color: #e4e4e7;\"></span> <span class=\"colorblk\"\n style=\"background-color: #d4d4d8;\"></span> <span class=\"colorblk\"\n style=\"background-color: #a1a1aa;\"></span> <span class=\"colorblk\"\n style=\"background-color: #71717a;\"></span> <span class=\"colorblk\"\n style=\"background-color: #52525b;\"></span> <span class=\"colorblk\"\n style=\"background-color: #3f3f46;\"></span> <span class=\"colorblk\"\n style=\"background-color: #27272a;\"></span> <span class=\"colorblk\"\n style=\"background-color: #18181b;\"></span> <span class=\"colorblk\"\n style=\"background-color: #09090b;\"></span>\n* <span class=\"color-label\">`neutral`:</span> <span class=\"colorblk\"\n style=\"background-color: #fafafa;\"></span> <span class=\"colorblk\"\n style=\"background-color: #f5f5f5;\"></span> <span class=\"colorblk\"\n style=\"background-color: #e5e5e5;\"></span> <span class=\"colorblk\"\n style=\"background-color: #d4d4d4;\"></span> <span class=\"colorblk\"\n style=\"background-color: #a3a3a3;\"></span> <span class=\"colorblk\"\n style=\"background-color: #737373;\"></span> <span class=\"colorblk\"\n style=\"background-color: #525252;\"></span> <span class=\"colorblk\"\n style=\"background-color: #404040;\"></span> <span class=\"colorblk\"\n style=\"background-color: #262626;\"></span> <span class=\"colorblk\"\n style=\"background-color: #171717;\"></span> <span class=\"colorblk\"\n style=\"background-color: #0a0a0a;\"></span>\n* <span class=\"color-label\">`stone`:</span> <span class=\"colorblk\"\n style=\"background-color: #fafaf9;\"></span> <span class=\"colorblk\"\n style=\"background-color: #f5f5f4;\"></span> <span class=\"colorblk\"\n style=\"background-color: #e7e5e4;\"></span> <span class=\"colorblk\"\n style=\"background-color: #d6d3d1;\"></span> <span class=\"colorblk\"\n style=\"background-color: #a8a29e;\"></span> <span class=\"colorblk\"\n style=\"background-color: #78716c;\"></span> <span class=\"colorblk\"\n style=\"background-color: #57534e;\"></span> <span class=\"colorblk\"\n style=\"background-color: #44403c;\"></span> <span class=\"colorblk\"\n style=\"background-color: #292524;\"></span> <span class=\"colorblk\"\n style=\"background-color: #1c1917;\"></span> <span class=\"colorblk\"\n style=\"background-color: #0c0a09;\"></span>\n* <span class=\"color-label\">`red`:</span> <span class=\"colorblk\"\n style=\"background-color: #fef2f2;\"></span> <span class=\"colorblk\"\n style=\"background-color: #fee2e2;\"></span> <span class=\"colorblk\"\n style=\"background-color: #fecaca;\"></span> <span class=\"colorblk\"\n style=\"background-color: #fca5a5;\"></span> <span class=\"colorblk\"\n style=\"background-color: #f87171;\"></span> <span class=\"colorblk\"\n style=\"background-color: #ef4444;\"></span> <span class=\"colorblk\"\n style=\"background-color: #dc2626;\"></span> <span class=\"colorblk\"\n style=\"background-color: #b91c1c;\"></span> <span class=\"colorblk\"\n style=\"background-color: #991b1b;\"></span> <span class=\"colorblk\"\n style=\"background-color: #7f1d1d;\"></span> <span class=\"colorblk\"\n style=\"background-color: #450a0a;\"></span>\n* <span class=\"color-label\">`orange`:</span> <span class=\"colorblk\"\n style=\"background-color: #fff7ed;\"></span> <span class=\"colorblk\"\n style=\"background-color: #ffedd5;\"></span> <span class=\"colorblk\"\n style=\"background-color: #fed7aa;\"></span> <span class=\"colorblk\"\n style=\"background-color: #fdba74;\"></span> <span class=\"colorblk\"\n style=\"background-color: #fb923c;\"></span> <span class=\"colorblk\"\n style=\"background-color: #f97316;\"></span> <span class=\"colorblk\"\n style=\"background-color: #ea580c;\"></span> <span class=\"colorblk\"\n style=\"background-color: #c2410c;\"></span> <span class=\"colorblk\"\n style=\"background-color: #9a3412;\"></span> <span class=\"colorblk\"\n style=\"background-color: #7c2d12;\"></span> <span class=\"colorblk\"\n style=\"background-color: #431407;\"></span>\n* <span class=\"color-label\">`slate`:</span> <span class=\"colorblk\"\n style=\"background-color: #fffbeb;\"></span> <span class=\"colorblk\"\n style=\"background-color: #fef3c7;\"></span> <span class=\"colorblk\"\n style=\"background-color: #fde68a;\"></span> <span class=\"colorblk\"\n style=\"background-color: #fcd34d;\"></span> <span class=\"colorblk\"\n style=\"background-color: #fbbf24;\"></span> <span class=\"colorblk\"\n style=\"background-color: #f59e0b;\"></span> <span class=\"colorblk\"\n style=\"background-color: #d97706;\"></span> <span class=\"colorblk\"\n style=\"background-color: #b45309;\"></span> <span class=\"colorblk\"\n style=\"background-color: #92400e;\"></span> <span class=\"colorblk\"\n style=\"background-color: #78350f;\"></span> <span class=\"colorblk\"\n style=\"background-color: #451a03;\"></span>\n* <span class=\"color-label\">`yellow`:</span> <span class=\"colorblk\"\n style=\"background-color: #fefce8;\"></span> <span class=\"colorblk\"\n style=\"background-color: #fef9c3;\"></span> <span class=\"colorblk\"\n style=\"background-color: #fef08a;\"></span> <span class=\"colorblk\"\n style=\"background-color: #fde047;\"></span> <span class=\"colorblk\"\n style=\"background-color: #facc15;\"></span> <span class=\"colorblk\"\n style=\"background-color: #eab308;\"></span> <span class=\"colorblk\"\n style=\"background-color: #ca8a04;\"></span> <span class=\"colorblk\"\n style=\"background-color: #a16207;\"></span> <span class=\"colorblk\"\n style=\"background-color: #854d0e;\"></span> <span class=\"colorblk\"\n style=\"background-color: #713f12;\"></span> <span class=\"colorblk\"\n style=\"background-color: #422006;\"></span>\n* <span class=\"color-label\">`lime`:</span> <span class=\"colorblk\"\n style=\"background-color: #f7fee7;\"></span> <span class=\"colorblk\"\n style=\"background-color: #ecfccb;\"></span> <span class=\"colorblk\"\n style=\"background-color: #d9f99d;\"></span> <span class=\"colorblk\"\n style=\"background-color: #bef264;\"></span> <span class=\"colorblk\"\n style=\"background-color: #a3e635;\"></span> <span class=\"colorblk\"\n style=\"background-color: #84cc16;\"></span> <span class=\"colorblk\"\n style=\"background-color: #65a30d;\"></span> <span class=\"colorblk\"\n style=\"background-color: #4d7c0f;\"></span> <span class=\"colorblk\"\n style=\"background-color: #3f6212;\"></span> <span class=\"colorblk\"\n style=\"background-color: #365314;\"></span> <span class=\"colorblk\"\n style=\"background-color: #1a2e05;\"></span>\n* <span class=\"color-label\">`green`:</span> <span class=\"colorblk\"\n style=\"background-color: #f0fdf4;\"></span> <span class=\"colorblk\"\n style=\"background-color: #dcfce7;\"></span> <span class=\"colorblk\"\n style=\"background-color: #bbf7d0;\"></span> <span class=\"colorblk\"\n style=\"background-color: #86efac;\"></span> <span class=\"colorblk\"\n style=\"background-color: #4ade80;\"></span> <span class=\"colorblk\"\n style=\"background-color: #22c55e;\"></span> <span class=\"colorblk\"\n style=\"background-color: #16a34a;\"></span> <span class=\"colorblk\"\n style=\"background-color: #15803d;\"></span> <span class=\"colorblk\"\n style=\"background-color: #166534;\"></span> <span class=\"colorblk\"\n style=\"background-color: #14532d;\"></span> <span class=\"colorblk\"\n style=\"background-color: #052e16;\"></span>\n* <span class=\"color-label\">`emerald`:</span> <span class=\"colorblk\"\n style=\"background-color: #ecfdf5;\"></span> <span class=\"colorblk\"\n style=\"background-color: #d1fae5;\"></span> <span class=\"colorblk\"\n style=\"background-color: #a7f3d0;\"></span> <span class=\"colorblk\"\n style=\"background-color: #6ee7b7;\"></span> <span class=\"colorblk\"\n style=\"background-color: #34d399;\"></span> <span class=\"colorblk\"\n style=\"background-color: #10b981;\"></span> <span class=\"colorblk\"\n style=\"background-color: #059669;\"></span> <span class=\"colorblk\"\n style=\"background-color: #047857;\"></span> <span class=\"colorblk\"\n style=\"background-color: #065f46;\"></span> <span class=\"colorblk\"\n style=\"background-color: #064e3b;\"></span> <span class=\"colorblk\"\n style=\"background-color: #022c22;\"></span>\n* <span class=\"color-label\">`teal`:</span> <span class=\"colorblk\"\n style=\"background-color: #f0fdfa;\"></span> <span class=\"colorblk\"\n style=\"background-color: #ccfbf1;\"></span> <span class=\"colorblk\"\n style=\"background-color: #99f6e4;\"></span> <span class=\"colorblk\"\n style=\"background-color: #5eead4;\"></span> <span class=\"colorblk\"\n style=\"background-color: #2dd4bf;\"></span> <span class=\"colorblk\"\n style=\"background-color: #14b8a6;\"></span> <span class=\"colorblk\"\n style=\"background-color: #0d9488;\"></span> <span class=\"colorblk\"\n style=\"background-color: #0f766e;\"></span> <span class=\"colorblk\"\n style=\"background-color: #115e59;\"></span> <span class=\"colorblk\"\n style=\"background-color: #134e4a;\"></span> <span class=\"colorblk\"\n style=\"background-color: #042f2e;\"></span>\n* <span class=\"color-label\">`cyan`:</span> <span class=\"colorblk\"\n style=\"background-color: #ecfeff;\"></span> <span class=\"colorblk\"\n style=\"background-color: #cffafe;\"></span> <span class=\"colorblk\"\n style=\"background-color: #a5f3fc;\"></span> <span class=\"colorblk\"\n style=\"background-color: #67e8f9;\"></span> <span class=\"colorblk\"\n style=\"background-color: #22d3ee;\"></span> <span class=\"colorblk\"\n style=\"background-color: #06b6d4;\"></span> <span class=\"colorblk\"\n style=\"background-color: #0891b2;\"></span> <span class=\"colorblk\"\n style=\"background-color: #0e7490;\"></span> <span class=\"colorblk\"\n style=\"background-color: #155e75;\"></span> <span class=\"colorblk\"\n style=\"background-color: #164e63;\"></span> <span class=\"colorblk\"\n style=\"background-color: #083344;\"></span>\n* <span class=\"color-label\">`sky`:</span> <span class=\"colorblk\"\n style=\"background-color: #f0f9ff;\"></span> <span class=\"colorblk\"\n style=\"background-color: #e0f2fe;\"></span> <span class=\"colorblk\"\n style=\"background-color: #bae6fd;\"></span> <span class=\"colorblk\"\n style=\"background-color: #7dd3fc;\"></span> <span class=\"colorblk\"\n style=\"background-color: #38bdf8;\"></span> <span class=\"colorblk\"\n style=\"background-color: #0ea5e9;\"></span> <span class=\"colorblk\"\n style=\"background-color: #0284c7;\"></span> <span class=\"colorblk\"\n style=\"background-color: #0369a1;\"></span> <span class=\"colorblk\"\n style=\"background-color: #075985;\"></span> <span class=\"colorblk\"\n style=\"background-color: #0c4a6e;\"></span> <span class=\"colorblk\"\n style=\"background-color: #082f49;\"></span>\n* <span class=\"color-label\">`blue`:</span> <span class=\"colorblk\"\n style=\"background-color: #eff6ff;\"></span> <span class=\"colorblk\"\n style=\"background-color: #dbeafe;\"></span> <span class=\"colorblk\"\n style=\"background-color: #bfdbfe;\"></span> <span class=\"colorblk\"\n style=\"background-color: #93c5fd;\"></span> <span class=\"colorblk\"\n style=\"background-color: #60a5fa;\"></span> <span class=\"colorblk\"\n style=\"background-color: #3b82f6;\"></span> <span class=\"colorblk\"\n style=\"background-color: #2563eb;\"></span> <span class=\"colorblk\"\n style=\"background-color: #1d4ed8;\"></span> <span class=\"colorblk\"\n style=\"background-color: #1e40af;\"></span> <span class=\"colorblk\"\n style=\"background-color: #1e3a8a;\"></span> <span class=\"colorblk\"\n style=\"background-color: #172554;\"></span>\n* <span class=\"color-label\">`indigo`:</span> <span class=\"colorblk\"\n style=\"background-color: #eef2ff;\"></span> <span class=\"colorblk\"\n style=\"background-color: #e0e7ff;\"></span> <span class=\"colorblk\"\n style=\"background-color: #c7d2fe;\"></span> <span class=\"colorblk\"\n style=\"background-color: #a5b4fc;\"></span> <span class=\"colorblk\"\n style=\"background-color: #818cf8;\"></span> <span class=\"colorblk\"\n style=\"background-color: #6366f1;\"></span> <span class=\"colorblk\"\n style=\"background-color: #4f46e5;\"></span> <span class=\"colorblk\"\n style=\"background-color: #4338ca;\"></span> <span class=\"colorblk\"\n style=\"background-color: #3730a3;\"></span> <span class=\"colorblk\"\n style=\"background-color: #312e81;\"></span> <span class=\"colorblk\"\n style=\"background-color: #1e1b4b;\"></span>\n* <span class=\"color-label\">`violet`:</span> <span class=\"colorblk\"\n style=\"background-color: #f5f3ff;\"></span> <span class=\"colorblk\"\n style=\"background-color: #ede9fe;\"></span> <span class=\"colorblk\"\n style=\"background-color: #ddd6fe;\"></span> <span class=\"colorblk\"\n style=\"background-color: #c4b5fd;\"></span> <span class=\"colorblk\"\n style=\"background-color: #a78bfa;\"></span> <span class=\"colorblk\"\n style=\"background-color: #8b5cf6;\"></span> <span class=\"colorblk\"\n style=\"background-color: #7c3aed;\"></span> <span class=\"colorblk\"\n style=\"background-color: #6d28d9;\"></span> <span class=\"colorblk\"\n style=\"background-color: #5b21b6;\"></span> <span class=\"colorblk\"\n style=\"background-color: #4c1d95;\"></span> <span class=\"colorblk\"\n style=\"background-color: #2e1065;\"></span>\n* <span class=\"color-label\">`purple`:</span> <span class=\"colorblk\"\n style=\"background-color: #faf5ff;\"></span> <span class=\"colorblk\"\n style=\"background-color: #f3e8ff;\"></span> <span class=\"colorblk\"\n style=\"background-color: #e9d5ff;\"></span> <span class=\"colorblk\"\n style=\"background-color: #d8b4fe;\"></span> <span class=\"colorblk\"\n style=\"background-color: #c084fc;\"></span> <span class=\"colorblk\"\n style=\"background-color: #a855f7;\"></span> <span class=\"colorblk\"\n style=\"background-color: #9333ea;\"></span> <span class=\"colorblk\"\n style=\"background-color: #7e22ce;\"></span> <span class=\"colorblk\"\n style=\"background-color: #6b21a8;\"></span> <span class=\"colorblk\"\n style=\"background-color: #581c87;\"></span> <span class=\"colorblk\"\n style=\"background-color: #3b0764;\"></span>\n* <span class=\"color-label\">`fuchsia`:</span> <span class=\"colorblk\"\n style=\"background-color: #fdf4ff;\"></span> <span class=\"colorblk\"\n style=\"background-color: #fae8ff;\"></span> <span class=\"colorblk\"\n style=\"background-color: #f5d0fe;\"></span> <span class=\"colorblk\"\n style=\"background-color: #f0abfc;\"></span> <span class=\"colorblk\"\n style=\"background-color: #e879f9;\"></span> <span class=\"colorblk\"\n style=\"background-color: #d946ef;\"></span> <span class=\"colorblk\"\n style=\"background-color: #c026d3;\"></span> <span class=\"colorblk\"\n style=\"background-color: #a21caf;\"></span> <span class=\"colorblk\"\n style=\"background-color: #86198f;\"></span> <span class=\"colorblk\"\n style=\"background-color: #701a75;\"></span> <span class=\"colorblk\"\n style=\"background-color: #4a044e;\"></span>\n* <span class=\"color-label\">`pink`:</span> <span class=\"colorblk\"\n style=\"background-color: #fdf2f8;\"></span> <span class=\"colorblk\"\n style=\"background-color: #fce7f3;\"></span> <span class=\"colorblk\"\n style=\"background-color: #fbcfe8;\"></span> <span class=\"colorblk\"\n style=\"background-color: #f9a8d4;\"></span> <span class=\"colorblk\"\n style=\"background-color: #f472b6;\"></span> <span class=\"colorblk\"\n style=\"background-color: #ec4899;\"></span> <span class=\"colorblk\"\n style=\"background-color: #db2777;\"></span> <span class=\"colorblk\"\n style=\"background-color: #be185d;\"></span> <span class=\"colorblk\"\n style=\"background-color: #9d174d;\"></span> <span class=\"colorblk\"\n style=\"background-color: #831843;\"></span> <span class=\"colorblk\"\n style=\"background-color: #500724;\"></span>\n* <span class=\"color-label\">`rose`:</span> <span class=\"colorblk\"\n style=\"background-color: #fff1f2;\"></span> <span class=\"colorblk\"\n style=\"background-color: #ffe4e6;\"></span> <span class=\"colorblk\"\n style=\"background-color: #fecdd3;\"></span> <span class=\"colorblk\"\n style=\"background-color: #fda4af;\"></span> <span class=\"colorblk\"\n style=\"background-color: #fb7185;\"></span> <span class=\"colorblk\"\n style=\"background-color: #f43f5e;\"></span> <span class=\"colorblk\"\n style=\"background-color: #e11d48;\"></span> <span class=\"colorblk\"\n style=\"background-color: #be123c;\"></span> <span class=\"colorblk\"\n style=\"background-color: #9f1239;\"></span> <span class=\"colorblk\"\n style=\"background-color: #881337;\"></span> <span class=\"colorblk\"\n style=\"background-color: #4c0519;\"></span>\n\n<style>\n.color-label { display: inline-block; width: 80px; }\n.blk { font-family: monospace; }\n.colorblk:after { content: ' '; }\n.colorblk {\n white-space: pre;\n border-radius: 3px;\n font-family: monospace;\n}\n</style>\n\n[Colours]: https://tailwindcss.com/docs/customizing-colors\n[Tailwind CSS]: https://tailwindcss.com/",
"oneOf": [
{
"description": "Animation to apply to the item.\n\nThis sets the [`animate-*`] class, valid values are `'none'`,\n`'spin'`, `'ping'`, `'pulse'`, `'bounce'`.\n\nArbitrary values such as `'[stroke-dashoffset-move_2s_linear_infinite]'`\ncan be used if an animation such as the following is provided in the\n`InfoGraph::css` key:\n\n```yaml\ntheme:\n styles:\n edge_defaults:\n animate: '[stroke-dashoffset-move_2s_linear_infinite]'\n shape_color: blue\n stroke_style: dashed # shorthand for [&>path]:[stroke-dasharray:3]\n stroke_width: '[2px]'\n stroke_shade_normal: '600'\n fill_shade_normal: '500'\n\ncss: >-\n @keyframes stroke-dashoffset-move {\n 0% { stroke-dashoffset: 30; }\n 100% { stroke-dashoffset: 0; }\n }\n```\n\n[`animate-*`]: https://tailwindcss.com/docs/animation",
"type": "string",
"const": "animate"
},
{
"description": "The [cursor style], e.g. `\"pointer\"`.\n\n[cursor style]: https://tailwindcss.com/docs/cursor",
"type": "string",
"const": "cursor"
},
{
"description": "Radius for a circle node shape, e.g. `\"6.0\"`.\n\nWhen present, the node will be rendered as a circle with the given\nradius instead of a rectangle.",
"type": "string",
"const": "circle_radius"
},
{
"description": "Extra classes to attach as is.",
"type": "string",
"const": "extra"
},
{
"description": "Colour for element background/arrow head for all states, e.g. `\"slate\"`.\n\nThis will be used for all highlight states if not overridden by one\nof the more specific variants.",
"type": "string",
"const": "fill_color"
},
{
"description": "Colour for the background when an element is not focused / hovered\nover, e.g. `\"slate\"`.",
"type": "string",
"const": "fill_color_normal"
},
{
"description": "Colour for the background when an element is focused, e.g. `\"slate\"`.",
"type": "string",
"const": "fill_color_focus"
},
{
"description": "Colour for the background when an element has the cursor hovering over\nit, e.g. `\"slate\"`.",
"type": "string",
"const": "fill_color_hover"
},
{
"description": "Colour for the background when an element is being clicked / pressed,\ne.g. `\"slate\"`.",
"type": "string",
"const": "fill_color_active"
},
{
"description": "Shade for element background/arrow head for all states, e.g. `\"600\"`.\n\nThis will be used for all highlight states if not overridden by one\nof the more specific variants.",
"type": "string",
"const": "fill_shade"
},
{
"description": "Shade for the background when an element is not focused /\nhovered over, e.g. `\"300\"` for nodes, `\"800\"` for edges.",
"type": "string",
"const": "fill_shade_normal"
},
{
"description": "Shade for the background when an element is focused, e.g.\n`\"200\"` for nodes, `\"700\"` for edges.",
"type": "string",
"const": "fill_shade_focus"
},
{
"description": "Shade for the background when an element has the cursor\nhovering over it, e.g. `\"100\"` for nodes, `\"600\"` for edges.",
"type": "string",
"const": "fill_shade_hover"
},
{
"description": "Shade for the background when an element is being clicked /\npressed, e.g. `\"200\"` for nodes, `\"700\"` for edges.",
"type": "string",
"const": "fill_shade_active"
},
{
"description": "Gap between items within a node, e.g. `\"1.5\"`.\n\nThis key has no effect on edges.",
"type": "string",
"const": "gap"
},
{
"description": "All padding within a node, e.g. `\"1.5\"`.\n\nThis key has no effect on edges.",
"type": "string",
"const": "padding"
},
{
"description": "Left and right padding within a node, e.g. `\"1.5\"`.\n\nThis key has no effect on edges.",
"type": "string",
"const": "padding_x"
},
{
"description": "Top and bottom padding within a node, e.g. `\"1.5\"`.\n\nThis key has no effect on edges.",
"type": "string",
"const": "padding_y"
},
{
"description": "Left padding within a node, e.g. `\"1.5\"`.\n\nThis key has no effect on edges.",
"type": "string",
"const": "padding_left"
},
{
"description": "Right padding within a node, e.g. `\"1.5\"`.\n\nThis key has no effect on edges.",
"type": "string",
"const": "padding_right"
},
{
"description": "Top padding within a node, e.g. `\"1.5\"`.\n\nThis key has no effect on edges.",
"type": "string",
"const": "padding_top"
},
{
"description": "Bottom padding within a node, e.g. `\"1.5\"`.\n\nThis key has no effect on edges.",
"type": "string",
"const": "padding_bottom"
},
{
"description": "All margins around a node, e.g. `\"1.5\"`.\n\nThis key has no effect on edges.",
"type": "string",
"const": "margin"
},
{
"description": "Left and right margins around a node, e.g. `\"1.5\"`.\n\nThis key has no effect on edges.",
"type": "string",
"const": "margin_x"
},
{
"description": "Top and bottom margins around a node, e.g. `\"1.5\"`.\n\nThis key has no effect on edges.",
"type": "string",
"const": "margin_y"
},
{
"description": "Left margin around a node, e.g. `\"1.5\"`.\n\nThis key has no effect on edges.",
"type": "string",
"const": "margin_left"
},
{
"description": "Right margin around a node, e.g. `\"1.5\"`.\n\nThis key has no effect on edges.",
"type": "string",
"const": "margin_right"
},
{
"description": "Top margin around a node, e.g. `\"1.5\"`.\n\nThis key has no effect on edges.",
"type": "string",
"const": "margin_top"
},
{
"description": "Bottom margin around a node, e.g. `\"1.5\"`.\n\nThis key has no effect on edges.",
"type": "string",
"const": "margin_bottom"
},
{
"description": "Opacity of a node, e.g. `\"0.5\"` in `\"opacity-0.5\"`.",
"type": "string",
"const": "opacity"
},
{
"description": "Outline colour for elements for all states, e.g. `\"blue\"`. Defaults to\n`\"blue\"`.",
"type": "string",
"const": "outline_color"
},
{
"description": "Outline colour when an element is not focused / hovered over, e.g.\n`\"blue\"`. Defaults to nothing.",
"type": "string",
"const": "outline_color_normal"
},
{
"description": "Outline colour when an element is focused, e.g. `\"blue\"`. Defaults to\nnothing.",
"type": "string",
"const": "outline_color_focus"
},
{
"description": "Outline colour when an element has the cursor hovering over it, e.g.\n`\"blue\"`. Defaults to nothing.",
"type": "string",
"const": "outline_color_hover"
},
{
"description": "Outline colour when an element is being clicked / pressed, e.g.\n`\"blue\"`. Defaults to nothing.",
"type": "string",
"const": "outline_color_active"
},
{
"description": "Shade for lines and borders for all states, e.g. `\"600\"`.\n\nThis will be used for all highlight states if not overridden by one\nof the more specific variants.",
"type": "string",
"const": "outline_shade"
},
{
"description": "Outline shade when an element is not focused / hovered over, e.g.\n`\"600\"` for nodes, `\"900\"` for edges. Defaults to nothing.",
"type": "string",
"const": "outline_shade_normal"
},
{
"description": "Outline shade when an element is focused, e.g.\n`\"500\"` for nodes, `\"800\"` for edges. Defaults to the aforementioned\nvalues.",
"type": "string",
"const": "outline_shade_focus"
},
{
"description": "Outline shade when an element has the cursor hovering over it, e.g.\n`\"400\"` for nodes, `\"700\"` for edges. Defaults to nothing.",
"type": "string",
"const": "outline_shade_hover"
},
{
"description": "Outline shade when an element is being clicked / pressed, e.g.\n`\"700\"` for nodes, `\"950\"` for edges. Defaults to nothing.",
"type": "string",
"const": "outline_shade_active"
},
{
"description": "Width of the border for nodes, or line for edges. Defaults to `\"2\"`.",
"type": "string",
"const": "outline_width"
},
{
"description": "Outline style for all states, e.g. `\"none\"`, `\"solid\"`, `\"dashed\"`,\n`\"dotted\"`.",
"type": "string",
"const": "outline_style"
},
{
"description": "Outline style when an element is not focused / hovered over, e.g.\n`\"none\"`, `\"solid\"`, `\"dashed\"`, `\"dotted\"`.",
"type": "string",
"const": "outline_style_normal"
},
{
"description": "Outline style when an element is focused, e.g. `\"none\"`, `\"solid\"`,\n`\"dashed\"`, `\"dotted\"`.",
"type": "string",
"const": "outline_style_focus"
},
{
"description": "Outline style when an element has the cursor hovering over it, e.g.\n`\"none\"`, `\"solid\"`, `\"dashed\"`, `\"dotted\"`.",
"type": "string",
"const": "outline_style_hover"
},
{
"description": "Outline style when an element is being clicked / pressed, e.g. `\"none\"`,\n`\"solid\"`, `\"dashed\"`, `\"dotted\"`.",
"type": "string",
"const": "outline_style_active"
},
{
"description": "Radius for the top left corner of a node. Defaults to `\"0.0\"`",
"type": "string",
"const": "radius_top_left"
},
{
"description": "Radius for the top right corner of a node. Defaults to `\"0.0\"`",
"type": "string",
"const": "radius_top_right"
},
{
"description": "Radius for the bottom left corner of a node. Defaults to `\"0.0\"`",
"type": "string",
"const": "radius_bottom_left"
},
{
"description": "Radius for the bottom right corner of a node. Defaults to `\"0.0\"`",
"type": "string",
"const": "radius_bottom_right"
},
{
"description": "Base colour for shape colourable attributes, e.g. stroke/border, fill.",
"type": "string",
"const": "shape_color"
},
{
"description": "Line/border colour for elements for all states, e.g. `\"slate\"`.",
"type": "string",
"const": "stroke_color"
},
{
"description": "Line/border colour when an element is not focused / hovered over, e.g.\n`\"slate\"`.",
"type": "string",
"const": "stroke_color_normal"
},
{
"description": "Line/border colour when an element is focused, e.g. `\"slate\"`.",
"type": "string",
"const": "stroke_color_focus"
},
{
"description": "Line/border colour when an element has the cursor hovering over it, e.g.\n`\"slate\"`.",
"type": "string",
"const": "stroke_color_hover"
},
{
"description": "Line/border colour when an element is being clicked / pressed, e.g.\n`\"slate\"`.",
"type": "string",
"const": "stroke_color_active"
},
{
"description": "Shade for lines and borders for all states, e.g. `\"600\"`.\n\nThis will be used for all highlight states if not overridden by one\nof the more specific variants.",
"type": "string",
"const": "stroke_shade"
},
{
"description": "Line/border shade when an element is not focused / hovered over, e.g.\n`\"600\"` for nodes, `\"900\"` for edges.",
"type": "string",
"const": "stroke_shade_normal"
},
{
"description": "Line/border shade when an element is focused, e.g.\n`\"500\"` for nodes, `\"800\"` for edges.",
"type": "string",
"const": "stroke_shade_focus"
},
{
"description": "Line/border shade when an element has the cursor hovering over it, e.g.\n`\"400\"` for nodes, `\"700\"` for edges.",
"type": "string",
"const": "stroke_shade_hover"
},
{
"description": "Line/border shade when an element is being clicked / pressed, e.g.\n`\"500\"` for nodes, `\"800\"` for edges.",
"type": "string",
"const": "stroke_shade_active"
},
{
"description": "Width of the border for nodes, or line for edges.",
"type": "string",
"const": "stroke_width"
},
{
"description": "Line/border style for all states, e.g. \"none\", \"solid\", \"dashed\",\n\"dotted\".",
"type": "string",
"const": "stroke_style"
},
{
"description": "Line/border style when an element is not focused / hovered over, e.g.\n`\"none\"`, `\"solid\"`, `\"dashed\"`, `\"dotted\"`.",
"type": "string",
"const": "stroke_style_normal"
},
{
"description": "Line/border style when an element is focused, e.g. \"none\", \"solid\",\n\"dashed\", \"dotted\".",
"type": "string",
"const": "stroke_style_focus"
},
{
"description": "Line/border style when an element has the cursor hovering over it, e.g.\n`\"none\"`, `\"solid\"`, `\"dashed\"`, `\"dotted\"`.",
"type": "string",
"const": "stroke_style_hover"
},
{
"description": "Line/border style when an element is being clicked / pressed, e.g.\n`\"none\"`, `\"solid\"`, `\"dashed\"`, `\"dotted\"`.",
"type": "string",
"const": "stroke_style_active"
},
{
"description": "Color for text within a node, e.g. `\"neutral\"` in `\"fill-neutral-500\"`.",
"type": "string",
"const": "text_color"
},
{
"description": "Shade for text within a node, e.g. `\"500\"` in `\"fill-neutral-500\"`.",
"type": "string",
"const": "text_shade"
},
{
"description": "Whether an element is visible.\n\nThis sets the [`visibility`] class, valid values are `'visible'`,\n`'invisible'`, `'collapse'`.\n\n[`visibility`]: https://tailwindcss.com/docs/visibility",
"type": "string",
"const": "visibility"
}
]
},
"ThemeDefault": {
"description": "Default theme styles when the diagram has no user interaction.\n\nContains `style_aliases` that are available to all the other `theme_*` data,\nand `base_styles` for specific entities.\n\n# Example\n\n```yaml\ntheme_default:\n style_aliases:\n padding_none:\n padding: \"0.0\"\n gap: \"0.0\"\n padding_tight:\n padding: \"2.0\"\n gap: \"2.0\"\n padding_normal:\n padding: \"4.0\"\n gap: \"4.0\"\n padding_wide:\n padding: \"6.0\"\n gap: \"6.0\"\n shade_light:\n fill_shade_hover: \"200\"\n fill_shade_normal: \"300\"\n fill_shade_focus: \"400\"\n fill_shade_active: \"500\"\n stroke_shade_hover: \"300\"\n stroke_shade_normal: \"400\"\n stroke_shade_focus: \"500\"\n stroke_shade_active: \"600\"\n text_shade: \"900\"\n base_styles:\n node_defaults:\n style_aliases_applied: [shade_light]\n shape_color: \"slate\"\n stroke_style: \"solid\"\n stroke_width: \"1\"\n text_color: \"neutral\"\n visibility: \"visible\"\n edge_defaults:\n stroke_width: \"1\"\n text_color: \"neutral\"\n visibility: \"visible\"\n t_aws:\n shape_color: \"yellow\"\n t_github:\n shape_color: \"neutral\"\n process_step_selected_styles:\n node_defaults:\n style_aliases_applied: [shade_pale, stroke_dashed_animated]\n edge_defaults:\n visibility: \"visible\"\n dark_mode_config:\n shade:\n mode: invert\n selector: root_dark_class\n```",
"type": "object",
"properties": {
"base_styles": {
"description": "Base styles for entities when there is no user interaction.",
"$ref": "#/$defs/ThemeStyles"
},
"dark_mode_config": {
"description": "Dark mode configuration.\n\nControls shade adjustment strategy and the CSS selector used for\ndark-mode variable overrides.\n\nDefaults to `DarkModeConfig::default()` (shade: invert, selector:\nroot_dark_class).",
"$ref": "#/$defs/DarkModeConfig",
"default": {
"selector": "root_dark_class",
"shade": {
"mode": "invert"
}
}
},
"process_step_selected_styles": {
"description": "Styles applied to entities when a process step is selected.",
"$ref": "#/$defs/ThemeStyles"
},
"style_aliases": {
"description": "Style aliases available to all theme data.\n\nThese group common style properties under a single name that can be\nreferenced using `style_aliases_applied`.",
"$ref": "#/$defs/StyleAliases"
}
}
},
"ThemeStyles": {
"description": "CSS utility class partials for each element. `Map<IdOrDefaults,\nCssClassPartials>` newtype.\n\nThis is used throughout the theme configuration to define styles for\nnodes and edges. The keys can be `node_defaults`, `edge_defaults`, or\nspecific entity IDs.\n\n# Example\n\nA `ThemeStyles` map can appear under various parent keys. For example,\nunder `theme_types_styles`:\n\n```yaml\ntheme_types_styles:\n type_thing_default: # <-- this is a `ThemeStyles`\n node_defaults:\n style_aliases_applied: [shade_light]\n shape_color: \"slate\"\n stroke_style: \"solid\"\n stroke_width: \"1\"\n visibility: \"visible\"\n edge_defaults:\n stroke_width: \"1\"\n visibility: \"visible\"\n t_aws:\n shape_color: \"yellow\"\n edge_t_localhost__t_github_user_repo__pull:\n style_aliases_applied: [shade_light]\n shape_color: \"blue\"\n```",
"type": "object",
"additionalProperties": {
"$ref": "#/$defs/CssClassPartials"
}
},
"ThemeTagThingsFocus": {
"description": "Styles when a tag is focused, applied to all tags or specific tags.\n\nWhen a tag is focused, things and edges associated with the tag are\nhighlighted. This map defines the styles applied to things based on\nthe focused tag.\n\nThe `tag_defaults` key applies styles to all tags uniformly.\nSpecific tag IDs can be used to override defaults for particular tags.\n\n# Example\n\n```yaml\ntheme_tag_things_focus:\n tag_defaults:\n node_defaults:\n style_aliases_applied: [shade_pale, stroke_dashed_animated]\n node_excluded_defaults:\n opacity: \"0.5\"\n\n tag_app_development:\n node_defaults:\n style_aliases_applied: [stroke_dashed_animated]\n node_excluded_defaults:\n opacity: \"0.3\"\n```",
"type": "object",
"additionalProperties": {
"$ref": "#/$defs/ThemeStyles"
}
},
"ThemeThingDependenciesStyles": {
"description": "Styles when a `thing` is focused to show its dependencies.\n\nDepending on which button is pressed, when a `thing` is focused, these same\nstyles may be used to show:\n\n* Predecessors / successors linked to this `thing`.\n* Immediate dependencies vs transitive (maybe closest `n` neighbours).\n\n# Example\n\n```yaml\ntheme_thing_dependencies_styles:\n things_included_styles: # <-- this is a `ThemeStyles`\n node_defaults:\n visibility: \"visible\"\n edge_defaults:\n visibility: \"visible\"\n\n things_excluded_styles: # <-- this is a `ThemeStyles`\n node_defaults:\n visibility: \"hidden\"\n edge_defaults:\n visibility: \"hidden\"\n```",
"type": "object",
"properties": {
"things_excluded_styles": {
"description": "Styles applied to things that are excluded from the dependency view.",
"$ref": "#/$defs/ThemeStyles"
},
"things_included_styles": {
"description": "Styles applied to things that are included in the dependency view.",
"$ref": "#/$defs/ThemeStyles"
}
}
},
"ThemeTypesStyles": {
"description": "Styles applied to things / edges of a particular `type` specified in\n`entity_types`.\n\nThis map contains both built-in default types and custom user-defined types.\n\n## Built-in Types\n\n* `type_organisation`: Parent container for services\n* `type_service`: A deployable service\n* `type_docker_image`: Docker container image\n* `type_dependency_edge_sequence_forward_default`: Default edge style for\n dependency sequence edges\n\n## Custom Types\n\nUsers can define their own types in `entity_types` and reference them here.\n\n# Example\n\n```yaml\ntheme_types_styles:\n type_organisation: # <-- this is a `ThemeStyles`\n node_defaults:\n style_aliases_applied: [shade_pale]\n stroke_style: \"dotted\"\n\n type_service:\n node_defaults:\n stroke_style: \"dashed\"\n\n type_docker_image:\n node_defaults:\n shape_color: \"sky\"\n\n type_dependency_edge_sequence_forward_default:\n edge_defaults:\n style_aliases_applied: [shade_dark]\n stroke_style: solid\n shape_color: \"neutral\"\n stroke_width: \"1\"\n```",
"type": "object",
"additionalProperties": {
"$ref": "#/$defs/ThemeStyles"
}
},
"ThingCopyText": {
"description": "Text to copy to clipboard when a thing's copy button is clicked.\n\nThis allows things to have different copy text than their display label.\nFor example, a directory thing might display as \"📂 ~/work/web_app\" but\ncopy as \"~/work/web_app\".\n\n# Example\n\n```yaml\nthing_copy_text:\n t_localhost_repo: \"~/work/web_app\"\n t_localhost_repo_src: \"~/work/web_app/src\"\n t_localhost_repo_target: \"~/work/web_app/target\"\n```",
"type": "object",
"additionalProperties": {
"type": "string"
}
},
"ThingDependencies": {
"description": "Dependencies between things can be one way, or cyclic.\n\nDependencies are static relationships between things, and should be rendered\nas \"on\" or \"off\" depending on whether a `thing` is focused / targeted, and\nwhether the user wants to see:\n\n* Predecessors / successors linked to this thing.\n* Immediate dependencies vs transitive (maybe closest `n` neighbours).\n\n* When B depends on A, it means A must exist before B.\n* Changes to A means B is out of date.\n\nHow we render dependencies (forward / backward / undirected / bidirectional\narrows) can be defined separately from the meaning of the dependency.\n\n# Example\n\n```yaml\nthing_dependencies:\n edge_t_localhost__t_github_user_repo__pull:\n kind: cyclic\n things:\n - t_localhost\n - t_github_user_repo\n edge_t_localhost__t_github_user_repo__push:\n kind: sequence\n things:\n - t_localhost\n - t_github_user_repo\n edge_t_localhost__t_localhost__within:\n kind: cyclic\n things:\n - t_localhost\n edge_t_github_user_repo__t_aws_ecr_repo__push:\n kind: sequence\n things:\n - t_github_user_repo\n - t_aws_ecr_repo\n```",
"type": "object",
"additionalProperties": {
"$ref": "#/$defs/EdgeGroup"
}
},
"ThingDescs": {
"description": "Descriptions for things (diagram nodes).\n\nThis map contains text (typically markdown) that provides additional\ncontext about things in the diagram. These descriptions can be displayed\nwhen a thing is focused or expanded.\n\n# Example\n\n```yaml\nthing_descs:\n t_localhost: \"User's computer\"\n t_aws: \"Amazon Web Services infrastructure\"\n```",
"type": "object",
"additionalProperties": {
"type": "string"
}
},
"ThingHierarchy": {
"description": "Hierarchy of `thing`s as a recursive tree structure.\n\nThe `ThingHierarchy` is a tree structure stored as a map of `ThingId` to\n`ThingHierarchy`. This structure is strictly unidirectional (no cycles).\n\nThis defines the nesting of things, which affects:\n* Visual containment in the diagram\n* The order of declaration affects the position of the `thing` in a flex box\n\n# Example\n\n```yaml\nthings:\n t_aws: # <-- `ThingHierarchy` (recursive)\n t_aws_iam: # <-- `ThingHierarchy` (recursive)\n t_aws_iam_ecs_policy: {}\n t_aws_ecr:\n t_aws_ecr_repo:\n t_aws_ecr_repo_image_1: {}\n t_aws_ecr_repo_image_2: {}\n\n t_github:\n t_github_user_repo: {}\n\n t_localhost:\n t_localhost_repo:\n t_localhost_repo_src: {}\n t_localhost_repo_target:\n t_localhost_repo_target_file_zip: {}\n t_localhost_repo_target_dist_dir: {}\n```",
"type": "object",
"additionalProperties": {
"$ref": "#/$defs/ThingHierarchy"
}
},
"ThingId": {
"description": "Unique identifier for a thing in the diagram, [`Id`] newtype.\n\nMust begin with a letter or underscore, and contain only letters, numbers,\nand underscores.\n\n# Examples\n\n```rust\nuse disposition_input_model::thing::ThingId;\nuse disposition_model_common::{id, Id};\n\nlet thing_id: ThingId = id!(\"example_id\").into();\n\nassert_eq!(thing_id.as_str(), \"example_id\");\n```",
"$ref": "#/$defs/Id"
},
"ThingInteractions": {
"description": "Interactions between things can be one way, or cyclic.\n\nInteractions have the same data structure as dependencies, but are\nconceptually different: `thing_dependencies` is intended to represent\ndependencies between software libraries, while interactions are\ncommunication between applications.\n\nThere *are* ordering dependencies between interactions, but *when* it is\nuseful to render `thing_dependencies` and `thing_interactions` differ.\nDependencies are static at a point in time, so it is useful to render the\nlinks between multiple `thing`s; interactions are present when a step in a\nprocess is executing, so they are rendered when the step is focused.\n\nIDs here can be the same as the ones in `thing_dependencies`.\n\n# Example\n\n```yaml\nthing_interactions:\n edge_t_localhost__t_github_user_repo__pull:\n kind: cyclic\n things:\n - t_localhost\n - t_github_user_repo\n edge_t_localhost__t_github_user_repo__push:\n kind: sequence\n things:\n - t_localhost\n - t_github_user_repo\n edge_t_github_user_repo__t_aws_ecr_repo__push:\n kind: sequence\n things:\n - t_github_user_repo\n - t_aws_ecr_repo\n```",
"type": "object",
"additionalProperties": {
"$ref": "#/$defs/EdgeGroup"
}
},
"ThingLayouts": {
"description": "User-specified flex-direction overrides for things.\n\nWhen a thing has children (i.e. it appears in `things` with nested\nentries), the layout engine needs to know whether to arrange those children\nin a row or column. By default, the direction alternates based on nesting\ndepth (column at even depths, row at odd depths). Entries in this map\noverride that default for the specified thing.\n\nOnly things that act as containers (i.e. have children in the hierarchy)\nbenefit from a layout override. Leaf things are ignored.\n\n# Note\n\nThis map uses [`Id`] keys, not [`ThingId`], so that layout overrides can be\napplied to `NodeInbuilt` keys as well.\n\n[`ThingId`]: crate::thing::ThingId\n\n# Example\n\n```yaml\nthing_layouts:\n t_cloud: \"row\"\n t_cloud_compute: \"column\"\n t_cloud_storage: \"column\"\n```",
"type": "object",
"additionalProperties": {
"$ref": "#/$defs/FlexDirection"
}
},
"ThingNames": {
"description": "Things in the diagram and their display labels.\n\nThis map defines the `ThingId`s and their display names.\n\n`ThingId`s are recommended to be namespace-aware, i.e. for things that nest,\nthe ID of the nested `thing` should be prefixed with the ID of the parent\n`thing`.\n\nExample:\n\n* `my_repo`: Repository directory.\n* `my_repo_src`: `src` directory within the repo.\n* `my_repo_target`: `target` directory within the repo.\n\n# Example\n\n```yaml\nthing_names:\n t_aws: \"☁️ Amazon Web Services\"\n t_aws_iam: \"🖊️ Identity and Access Management\"\n t_aws_ecr: \"🗄️ Elastic Container Registry\"\n t_aws_ecr_repo: \"💽 web_app repo\"\n t_github: \"🐙 GitHub\"\n t_github_user_repo: \"azriel91/web_app\"\n t_localhost: \"🧑💻 Localhost\"\n t_localhost_repo: \"📂 ~/work/web_app\"\n```",
"type": "object",
"additionalProperties": {
"type": "string"
}
}
}
}