1# diagram.zip documentation23---4title: Create a diagram5description: Choose a diagram type and create a diagram in diagram.zip.6sidebar_position: 17---89# Create a diagram1011Start with a diagram type. Each type page shows the source format, a small example, and the syntax that you need first.1213## A simple workflow14151. Choose a type from the [diagram type list](/).162. Open its **Syntax** page.173. Copy the example into the **Source** tab.184. Replace the example labels and connections.195. Edit metadata or presentation in the **Details** tab when needed.206. Check the preview.217. Choose **Save as File** for a portable editable SVG, or **Publish** for a stable server alias.2223## Open an existing diagram2425You can reopen an editable SVG from a local file, including a file selected on26mobile, or by dragging it into the editor. You can also paste SVG text into the27open flow. The editor accepts an HTTP(S) or data URL when the response is an28SVG document.2930An editable SVG remains a useful visible image. It also contains a versioned31Diagram.zip document in SVG metadata and `data-*` attributes. The document32restores the source, type, options, presentation, title, and description.3334The editor validates the embedded document before creating a draft. Ordinary35SVG, ambiguous SVG, unsupported SVG, and lossy SVG are rejected instead of36being guessed or silently converted. Imported input is limited to 5 MiB.3738## Choose a type3940Use the launcher at [diagram.zip](https://diagram.zip/) to filter by name,41extension, or purpose. Choose **Create** to start a new document from that42format's worked example.4344When you change format in the editor, diagram.zip preserves the current source,45title, description, and presentation while choosing a different renderer.46Renderer-specific options reset because they may not apply to the new format.47The active type is recorded in the page URL as `?type={type}`. Saved read and48edit links remain alias-based and do not depend on this query.4950## Source, Details, and preview5152The left pane has **Source** and **Details** tabs. Source contains the selected diagram language. Details contains validated JSON for metadata, renderer options, and presentation.5354Edit the title directly in the top bar for a faster naming workflow. The value stays synchronized with `title` in Details.5556The diagnostics dock below the editors reports Details validation. Invalid Details JSON keeps the last valid preview and blocks actions that require valid state.5758The preview updates as you edit. A source syntax error can stop rendering and appears in a short-lived toast at the lower right.5960The preview toolbar controls zoom, fit, raw output, theme, and transparency. Appearance changes preserve the current zoom and pan position.6162The preview theme affects only the output pane. The application continues to follow the browser or operating-system color preference.6364Structured types, such as BPMN, Diagrams.net, Excalidraw, UMLet, Vega, and WaveDrom, use XML or JSON. Keep valid document structure when you edit these types.6566Read [General presentation settings](/style/presentation/) for the Details document schema and appearance values.6768## Local drafts6970Open diagrams keep unsaved changes in local browser storage. The launcher lists71recent local documents and published links on this device. Local documents can72be reopened, duplicated, or explicitly removed.7374Anonymous drafts default to local work. **Save as File** downloads an editable75SVG without creating a server alias. The downloaded file can be reopened on76another device through the same import flow.7778Published links use a separate device-only overlay for local changes. Read79[Working state and published state](/collaboration/working-and-saved-state/)80before restoring or copying that overlay.8182## Save, publish, or share8384Use **Publish** to create or update a server alias. Use **Encrypt & Publish**85when the server copy requires password protection. Both actions opt into server86persistence.8788Use an edit link when people must save changes. The Share menu also provides89**Copy SVG URL** and **Copy as Markdown** for image embeds. Anonymous drafts use90a self-contained packed SVG URL; published diagrams use their stable alias91render. Read [Share a diagram](/collaboration/sharing/) before you send an edit92link.9394Open the command palette with **Command-K** on macOS or **Control-K** elsewhere.95It includes file export, publishing, copy/share actions, format changes, preview96commands, opening an editable SVG, and documentation. **Command-S / Control-S**97saves an editable SVG file.9899---100101---102id: presentation103title: General presentation settings104description: Edit diagram metadata and choose a shared or renderer-defined presentation.105sidebar_position: 1106---107108# General presentation settings109110Open the **Details** tab in the left pane. It contains a validated JSON document for metadata, renderer options, and presentation.111112```json113{114 "title": "Service flow",115 "description": "A request moving through the public API.",116 "options": {},117 "presentation": {118 "appearance": "auto-transparent",119 "background": "",120 "padding": 0,121 "frame": false122 }123}124```125126`title` accepts at most 200 characters. `description` accepts at most 2,000 characters. Unknown properties are rejected.127128The diagnostics dock reports invalid JSON or schema values. Diagram.zip keeps the last valid preview until the document becomes valid again.129130## Renderer options131132Put renderer-specific settings in the top-level `options` object. Option values may be strings, numbers, or booleans. The Style page for each diagram type lists its supported keys.133134## Appearance135136Appearance is presentation only. It does not change source geometry, notation layout, orientation, wrapping, or packing.137138For TRN, use the `.layout` directive in Source. Generated SVG classes and data attributes are output metadata, not an authoring API.139140`raw` keeps the safe renderer output. It enables the custom background, padding, and frame values in the presentation document.141142The shared appearances apply one Diagram.zip palette to supported renderer output:143144- `auto-transparent` and `auto-framed` include both palettes. The SVG selects one with `prefers-color-scheme`.145- `light-transparent` and `light-framed` always use the light palette.146- `dark-transparent` and `dark-framed` always use the dark palette.147- Transparent appearances omit the outer canvas.148- Framed appearances add a matching canvas, standard padding, and a border.149150When the editor creates an anonymous packed SVG URL, it embeds self-contained151palette rules selected by the root `data-dz-appearance`. The `/svg/{packed}`152route synchronizes that single value from the embedded153`diagram.presentation.appearance`. Changing the data value selects raw, light,154dark, or automatic palette CSS without rewriting SVG paint. Transparent or155framed bounds are prepared before packing because CSS cannot change the outer156`viewBox`.157158The editor disables appearances that the current renderer profile cannot support. Diagrams.net supports raw and framed appearances while its authored paint remains unchanged.159160Excalidraw and TikZ support every appearance. Their neutral canvas, ink, and line paint adapt while authored non-neutral paint remains renderer-defined.161162Read [SVG normalization and version contracts](/style/svg-normalization) for capability levels, renderer version selection, and artifact metadata.163164## Preview controls165166The preview toolbar offers **Raw**, a theme icon, and a transparency icon. These controls rewrite the appearance value in Details.167168The theme icon switches only the preview between explicit light and dark output. It does not change the application or system preference.169170The transparency icon switches between transparent and framed output. Raw, theme, and transparency changes preserve the current preview zoom and pan position.171172## Background173174Set `appearance` to `raw` before you set `background`. Use an empty string for the renderer default or a six-digit hexadecimal color.175176Check label and line contrast after changing the background.177178## Padding179180Padding adds space around the rendered diagram. Use a small value for an inline image. Use a larger value when a frame or a presentation layout needs more space.181182`padding` must be an integer from **0 to 256 pixels**.183184## Frame185186Set `frame` to `true` when raw output needs a clear boundary. Set it to `false` when another surface provides the boundary.187188## Type-specific styling189190General presentation settings do not replace the style rules in the source language. Open the **Style** page for a type to learn its source controls.191192For example, [Mermaid styling](/style/types/mermaid/) uses Mermaid configuration. [Graphviz styling](/style/types/graphviz/) uses DOT attributes.193194## A safe order1951961. Choose a shared appearance when the renderer supports it.1972. Use `raw` when you need custom canvas values.1983. Apply type-specific styles.1994. Check light, dark, and transparent output at the target size.200201A **Renderer options** section appears only when the renderer adds options for that type.202203---204205---206id: svg-normalization207title: SVG normalization and version contracts208description: Understand normalized SVG, renderer version selection, capability metadata, and consumer guarantees.209sidebar_position: 2210---211212# SVG normalization and version contracts213214Diagram.zip accepts SVG from renderers with different structures, palettes, and release cycles. A shared pipeline turns that output into safe, predictable artifacts.215216```text217renderer SVG218 -> sanitization219 -> canonical normalization220 -> appearance materialization221 -> final SVG222```223224The renderer owns source interpretation and layout. Later stages preserve diagram geometry while adding safety, semantic paint roles, and optional presentation bounds.225226## Editable SVG contract227228An editable export is still a normal visible SVG. It embeds a versioned229Diagram.zip document in `<metadata>` and uses `data-*` attributes for compact230per-element and root bindings. The document records the source type, source,231renderer options, presentation, title, and description.232233The metadata contract is versioned independently from rendering contracts. An234importer must validate the schema, required fields, size limit, and deterministic235reconstruction before it creates a draft. The current input limit is 5 MiB.236237The importer accepts a validated enriched SVG from a local file, drag and drop,238pasted SVG text, or an HTTP(S) or data URL. It rejects ordinary SVG, ambiguous239metadata, unsupported schema versions, and any input that would lose source or240presentation information. It does not infer a source language from visible241shapes.242243**Save as File** exports the enriched SVG without server persistence. **Publish**244and **Encrypt & Publish** persist aliases separately from the file export.245246## Artifact stages247248| Stage | Contract |249| --- | --- |250| Renderer SVG | Output from one identified renderer build. |251| Canonical SVG | Sanitized SVG with normalized metadata, bounds, and supported semantic roles. |252| Materialized SVG | Canonical geometry combined with one explicit appearance, palette, and optional frame. |253254Materialization does not run the renderer again. Light, dark, transparent, and framed artifacts reuse the same canonical geometry.255256Framed appearances may expand the outer view box for standard padding and the frame. They do not reroute connectors or reflow labels.257258## Appearance contract259260The appearance name is a closed enum:261262```text263raw264auto-transparent265light-transparent266dark-transparent267auto-framed268light-framed269dark-framed270```271272`raw` preserves the safe renderer appearance. It does not promise byte-for-byte preservation because sanitization and deterministic serialization still apply.273274Automatic appearances embed both palettes and select one with `prefers-color-scheme`. They do not depend on styles from the embedding page.275276Transparent appearances omit the outer canvas. Diagram objects may retain opaque surfaces when those surfaces are required for readable labels.277278Framed appearances add a matching canvas, standard padding, and a border. They remain readable independently of the embedding page.279280The editor offers only appearances advertised by the active profile. `raw` is always available.281282## Capability levels283284| Conformance | Meaning | Expected appearance support |285| --- | --- | --- |286| `semantic` | Stable renderer meaning maps directly to shared visual roles. | All audited appearances. |287| `adaptive` | Known structure and neutral paint adapt while authored color remains intact. | All audited appearances. |288| `presentation-only` | The authored drawing stays unchanged while Diagram.zip owns the outer presentation. | Raw and audited framed appearances. |289| `raw` | The SVG is safe, but no themed adaptation is claimed. | Raw only. |290291An authored non-neutral color may remain unchanged in a semantic or adaptive profile. Normalization does not erase meaningful source styling.292293## How renderer versions select a profile294295Each engine catalog entry pins a renderer version and an audited normalization profile. Compatibility belongs to that tested pair, not only to the engine name.296297HTTP renderers identify their output with these response headers:298299| Header | Purpose |300| --- | --- |301| `X-Diagram-Engine-Version` | Identifies the underlying engine release. |302| `X-Renderer-Build` | Identifies the Diagram.zip renderer build. |303304Every renderer provides the same version identity through its catalog entry and HTTP response. Diagram.zip uses this identity before it assigns semantic roles.305306An unknown or upgraded renderer build does not inherit an older profile automatically. It falls back to `safe-raw-1`, which supports only `raw`.307308This fail-closed behavior prevents rules for one renderer structure from changing unrelated elements in another structure.309310Version identifiers are opaque contract values. Consumers should compare complete values and must not infer compatibility from embedded numbers.311312The [renderer catalog](https://diagram.zip/render/v1/catalog) reports every engine version, known loss, and active normalization capability.313314## Independently versioned contracts315316| Contract | Example identifier | Changes when |317| --- | --- | --- |318| Canonical schema | `1` | The canonical SVG structure changes incompatibly. |319| Normalizer | `svg-normalizer-4` | Sanitization, annotation, or serialization behavior changes. |320| Profile | `neutral-svg-semantic-2` | Renderer recognition or role assignment changes. |321| Palette | `diagramzip-palette-2` | Materialized role colors change. |322| Materializer | `svg-materializer-4` | Appearance rules, padding, frame, or output assembly changes. |323| Renderer | Catalog version and build | Engine output or its integration changes. |324325These versions advance independently. A renderer upgrade does not require a schema change, and a palette update does not require new geometry.326327Any component that changes pixels or bounds must change the relevant build identifier. Cache identity must include every component that affected the artifact.328329## Root SVG metadata330331Canonical and materialized SVG expose their active contract through `data-dz-*` attributes on the root element.332333| Attribute | Meaning |334| --- | --- |335| `data-dz-schema` | Canonical SVG schema. |336| `data-dz-normalizer` | Normalizer build. |337| `data-dz-engine` | Renderer engine identifier. |338| `data-dz-profile` | Selected normalization profile. |339| `data-dz-palette` | `renderer` for raw SVG, or the selected Diagram.zip palette build. |340| `data-dz-appearance` | Active palette selector and materialized geometry mode. |341| `data-dz-conformance` | Active capability level. |342| `data-dz-appearances` | Supported non-raw appearances, separated by spaces. |343| `data-dz-bounds` | Canonical diagram bounds as `x y width height`. |344| `data-dz-materializer` | Materializer build, present after non-raw materialization. |345346Normalized elements may also use `data-dz-fill`, `data-dz-stroke`, and `data-dz-role`. These attributes separate semantic intent from concrete palette values.347348```xml349<svg350 data-dz-schema="1"351 data-dz-normalizer="svg-normalizer-4"352 data-dz-engine="mermaid"353 data-dz-profile="neutral-svg-semantic-2"354 data-dz-palette="renderer"355 data-dz-appearance="raw"356 data-dz-conformance="adaptive"357 data-dz-appearances="auto-transparent light-transparent dark-transparent auto-framed light-framed dark-framed"358 data-dz-bounds="0 0 320 180">359</svg>360```361362The identifiers above are examples. Inspect the artifact or catalog instead of hard-coding them.363364Consumers should treat `data-dz-appearances` as an allowlist. Adding an unsupported value by hand does not create a supported artifact.365366Materialized SVG embeds raw, light, dark, and automatic palette rules keyed by367the root `data-dz-appearance`. Changing that one value can select palette CSS368without rewriting element paint. Transparent versus framed output may have369different bounds; materialization still prepares the outer `viewBox`, padding,370canvas, and frame geometry.371372## Consumer guarantees373374A normalized SVG has these guarantees:375376- It is valid, sanitized, deterministic SVG with no unapproved network dependency.377- It is self-contained after materialization and does not require embedding-page CSS.378- It preserves renderer geometry, except for presentation bounds added by a frame.379- It applies palette rules only to elements assigned a supported semantic role.380- It preserves authored paint when the profile cannot adapt that paint honestly.381- It rejects unsupported appearance materialization instead of applying heuristic theming.382383Cache keys must include source identity, renderer options, renderer builds, schema, normalizer, profile, palette, materializer, and appearance.384385Do not key a cache only by source and engine name. That can return artifacts created under an incompatible renderer or presentation contract.386387## Upgrade expectations388389A renderer upgrade is a new output contract until the representative test corpus passes. The existing profile may then add compatibility, or a new profile may replace it.390391Tests cover safety, determinism, raw fidelity, geometry stability, contrast, transparent canvases, frames, authored colors, and hostile resource attempts.392393See the [full engineering contract](https://github.com/FelineStateMachine/diagramzip/blob/main/docs/svg-normalization.md) for profile design, semantic roles, validation rules, and caching details.394395---396397---398id: sharing399title: Share a diagram400description: Share read-only or editable diagram.zip links.401sidebar_position: 1402---403404# Share a diagram405406Publishing is optional. Anonymous drafts remain local until you choose407**Publish** or **Encrypt & Publish**. A published diagram has a stable alias.408409The Share menu contains these actions:410411- **Publish** creates or updates an open server alias.412- **Encrypt & Publish** creates or updates a password-protected server alias.413- **Save as File** downloads an editable enriched SVG without server persistence.414- **Copy SVG URL** copies the stable render URL for an open published alias. For415 an anonymous draft, it copies a self-contained URL with the editable SVG data416 packed into the URL itself.417- **Copy as Markdown** copies a Markdown image using the same stable or packed418 SVG URL.419420Lock, password change, and password removal actions stay beside the content421they affect. Save as File is available for a local draft and does not require422an account or network persistence.423424## Read links425426A read link lets a person open the published diagram. The link has this form:427428```text429https://diagram.zip/d/{alias}430```431432Anyone who has an open read link can view the diagram. Anyone who has an open433read link can also use the SVG or Markdown embed link.434435A read link does not let a person update the published diagram.436437An editable SVG file is separate from a read link. It remains useful as an SVG438image, while its versioned Diagram.zip document supports a later import.439440For a locked diagram, the person must also enter the password. The password is441not part of the read link.442443## Edit links444445An edit link gives permission to publish changes to the alias. It has this form:446447```text448https://diagram.zip/d/{alias}#w={write-capability}449```450451The edit capability is a bearer credential. Anyone who has the complete edit452link can update the diagram. Share it only with people who should have write453access.454455The browser reads the capability from the URL fragment. The browser then stores456it for that alias and removes it from the address bar. A copied page URL is457therefore normally a read link. Copy the edit link from the Share dialog when458you need to share write access.459460Copy actions report success or failure in a short-lived toast above the dialog461backdrop.462463For a locked diagram, an edit link does not replace the password. The person464needs both the edit capability and the password.465466There are no accounts or recovery controls. If you lose the edit capability,467you cannot update that alias from a new device. If you lose the password for a468locked diagram, you cannot decrypt it.469470## Read-only edits and forks471472You can edit a diagram after opening a read link. These edits stay local until473you publish them.474475If this browser already has unsaved changes for the link, a local-changes bar476offers **Restore published** and **Make a copy**. Restore returns to the shared477revision. Make a copy forks the local state to a new alias, even when this478browser also holds write access to the original.479480The Publish button becomes **Publish a Copy** because you do not have write481access to the original alias. Publish the copy to create a new alias and a new482edit link. The original diagram does not change.483484## Publish conflicts485486Each published alias has a revision. The editor checks the revision when it487publishes.488489If another person published a newer revision first, diagram.zip reports a490publish conflict. Choose one of these actions:491492- **Reload published** discards local edits and opens the newer published version.493- **Publish as new** keeps your edits and creates a separate alias.494495The editor does not overwrite a newer published revision without your choice.496497## Embeds498499The Share dialog provides an SVG image link and a Markdown image link without500requiring publication. An open published alias uses its stable server render.501An anonymous draft uses a compressed, self-contained editable SVG URL and does502not create server state.503504Before packing an anonymous URL, the editor prepares the selected transparent505or framed geometry and embeds self-contained palette CSS. The root506`data-dz-appearance` value selects raw, light, dark, or automatic palette rules.507The `/svg/{packed}` route validates the SVG and synchronizes that one value from508the embedded `diagram.presentation.appearance`. Consumers do not need to509simulate the palette or patch SVG paint client-side. Frame padding and the outer510`viewBox` are prepared before packing because CSS cannot change SVG bounds.511512Packed URLs contain the rendered SVG, diagram source, options, metadata, and513presentation settings. Anyone with the URL can inspect that content and reopen514it as an editable SVG. Do not use a packed URL for secrets. Diagram.zip rejects515a copy when the complete URL would exceed the safe request limit. Save the516editable SVG as a file or publish it instead.517518Locked diagrams cannot be embedded. An embed request cannot ask for a password,519so the server does not return encrypted diagram renders as public images.520521Publish the diagram again before you share if the Share dialog says that an522alias link shows an older published version.523524## Importing an editable SVG525526Open an editable SVG from a file picker, drag and drop it, paste SVG text, or527provide an HTTP(S) or data URL. This flow creates a local draft first. It does528not publish the draft automatically.529530The importer accepts only a valid, versioned Diagram.zip document. It rejects531ordinary SVG, ambiguous metadata, unsupported schema versions, and inputs that532would lose source or presentation information. Input is limited to 5 MiB.533534---535536---537id: encryption538title: Password encryption539description: Understand password protection for diagram.zip diagrams.540sidebar_position: 2541---542543# Password encryption544545Use a password when a diagram must not be readable by people who only have its546read link.547548Choose **Encrypt & Publish** to opt into encrypted server persistence. Choose549**Save as File** when the draft should remain local. An editable SVG export is550plain text so it can remain a useful image, and it must not be treated as an551encrypted backup.552553## What is encrypted554555When you lock a diagram, the browser encrypts these items before it sends them556to diagram.zip:557558- diagram source;559- diagram type and renderer options;560- presentation settings;561- title and description;562- published SVG and PNG renders.563564The browser decrypts the diagram after you enter the password. The renderer565can receive the source while it creates a preview. Persistent storage receives566encrypted data for a locked diagram.567568## What the password does569570The browser creates a private encryption key for the diagram. The password571protects that key. The browser uses a new random value for each encrypted item.572573The password and the unwrapped encryption key stay in the browser. diagram.zip574does not receive either value.575576The password also protects read access. A person with only the read link sees a577password prompt. A person with an edit link still needs the password before578they can read or publish the diagram.579580## Password changes581582Changing the password changes the protection for the private encryption key.583It does not require the browser to encrypt every stored item again.584585Enter the current password before you change or remove password protection.586587## Password loss588589There is no password reset or account recovery. If you lose the password, you590cannot decrypt the source, metadata, or published renders. Keep a secure copy of591the password when the diagram is important.592593## Locked drafts594595The editor keeps an open draft in the browser so you can recover recent work.596It does not write a locked draft to browser storage as plaintext.597598For a locked diagram, keep the page open and publish the diagram explicitly. A599locked draft is persisted only after a successful publish. If the page closes600before that publish, the browser may not be able to restore the draft.601602## Embeds603604Locked diagrams cannot use public SVG or Markdown embeds. An embed has no safe605way to ask for the password. Open the diagram in diagram.zip to enter the606password and view it.607608An editable SVG imported from a file, pasted text, or a URL creates a local609draft after validation. The importer rejects ordinary, ambiguous, unsupported,610or lossy SVG and limits input to 5 MiB.611612---613614---615id: working-and-saved-state616title: Working state and published state617description: Understand editor drafts, published revisions, and persistent diagram data.618sidebar_position: 3619---620621# Working state and published state622623The editor has a working state and a published state. They can be different624until you publish.625626## Working state627628The working state is what you currently see and edit. It includes the diagram629source, type, renderer options, presentation settings, title, and description.630631Source and Details use separate editor tabs. Details is a JSON document that632contains the title, description, renderer options, and presentation settings.633634Invalid Details JSON remains in the local draft. The editor keeps the last635valid preview and blocks file export, publishing, sharing, privacy, and type636changes until it is valid.637638When you edit a published diagram, the working state changes first. The639published diagram does not change until you choose **Publish**.640641For an open diagram, diagram.zip stores the working state as a local browser642draft. This draft supports recovery on the same browser. It is not a published643diagram and other people cannot read it.644645The launcher stores a small metadata-only recent index. Local document source,646Details text, file-save state, and parked per-format drafts live in separate647device-only bodies. Published aliases have no body in the recent index and are648refetched when opened.649650Anonymous drafts default to local work. **Save as File** exports the working651state as an editable enriched SVG. The file remains useful as a visible SVG652image and contains a versioned Diagram.zip document for later import.653654Importing an editable SVG creates a local draft. The input can come from a655file, drag and drop, pasted SVG text, or an HTTP(S) or data URL. The importer656rejects ordinary, ambiguous, unsupported, or lossy SVG instead of guessing.657Imported input has a 5 MiB limit.658659The launcher can reopen and duplicate local documents. Removing a local-only660document requires confirmation because it cannot be recovered from a server.661662When a published link opens with a different local draft, the editor marks663that draft as a device-only overlay. Choose **Restore published** to discard664the overlay and return to the alias revision, or **Make a copy** to preserve it665under a new alias. Neither action silently changes the original share link.666667For a locked diagram, the editor does not store the working state as plaintext668in browser storage. Publish a locked diagram explicitly to persist it.669670Zoom and pan are preview session state, not published diagram state. Appearance671changes and Edit or Preview tab switches preserve the current view position.672673## Published state674675The published state is the last version that you published successfully. It676has an alias, a revision, and a stable read link.677678The Share dialog uses the published state. If the working state has changes,679the dialog tells you to publish before you share. This prevents you from680sharing an older version by mistake.681682## Persistent data683684After a successful Publish or Encrypt & Publish, diagram.zip persists the685diagram content and its metadata. It can also persist SVG and PNG renders for686that published revision.687688Open content is stored as readable diagram data. Locked content and locked689renders are stored as encrypted data. See [Password encryption](/collaboration/encryption/)690for the locked diagram rules.691692The persisted data belongs to the alias and its current revision. A local draft693does not replace the persisted data.694695## Publish flow696697The normal flow is:6986991. Edit the working state.7002. Choose **Publish** or **Encrypt & Publish**.7013. diagram.zip stores a new revision.7024. The published state becomes the working state.703704Publishing a new diagram creates an alias and an edit capability. Publishing705an open diagram with an edit capability updates its alias. Publishing a706read-only diagram creates a new alias instead.707708## Conflicts709710The editor publishes against the revision that it last loaded. If that revision711is no longer current, another person published the alias first.712713The editor then offers **Reload published** or **Publish as new**. Reload714replaces the working state with the current published state. Publish as new715preserves the working state in a new alias. diagram.zip does not silently716overwrite the other person's published version.717718---719720---721id: create-plantuml722slug: /create/types/plantuml723title: PlantUML724description: Create a PlantUML diagram in diagram.zip.725sidebar_label: PlantUML726---727728# PlantUML729730PlantUML creates UML and related diagrams from directives and relationships.731732## Use this type733734Use PlantUML for sequence, class, activity, state, component, deployment, and use-case diagrams.735736## Source format737738The source format is **PlantUML text**. Enter the source in the diagram.zip editor.739740## Syntax essentials741742- Start the source with `@startuml`.743- End the source with `@enduml`.744- Declare participants or elements before complex relationships.745- Use arrows to define relationships or messages.746747### Example748749```text750@startuml751actor Alice752participant Service753Alice -> Service: Create a diagram754Service --> Alice: Return the link755@enduml756```757758## Related pages759760- [Style PlantUML](/style/types/plantuml)761- [General presentation settings](/style/presentation)762- [Open PlantUML in the editor](https://diagram.zip/?type=plantuml)763764## Upstream reference765766[PlantUML documentation](https://plantuml.com/)767768---769id: style-plantuml770slug: /style/types/plantuml771title: PlantUML772description: Style a PlantUML diagram in diagram.zip.773sidebar_label: PlantUML774---775776# Style PlantUML777778PlantUML supports themes, skin parameters, colors, sprites, and element-specific style rules.779780Start with the [general presentation settings](/style/presentation). Edit shared or raw presentation in Details, and keep renderer-specific styling in Source.781782## Source controls783784- Use `!theme` to apply a bundled theme.785- Use `skinparam` for global or diagram-specific values.786- Add color values to elements when you need a local override.787788## Renderer options789790| Option | Values | Purpose |791| --- | --- | --- |792| `theme` | A supported PlantUML theme name | Apply the theme before diagram.zip renders the source. |793| `no-metadata` | Flag | Remove the source metadata from the rendered image. |794795## Related pages796797- [Create a PlantUML diagram](/create/types/plantuml)798- [General presentation settings](/style/presentation)799- [SVG normalization and version contracts](/style/svg-normalization)800- [Open PlantUML in the editor](https://diagram.zip/?type=plantuml)801802---803804---805id: create-mermaid806slug: /create/types/mermaid807title: Mermaid808description: Create a Mermaid diagram in diagram.zip.809sidebar_label: Mermaid810---811812# Mermaid813814Mermaid creates diagrams with compact, Markdown-friendly text.815816## Use this type817818Use Mermaid for flowcharts, sequence diagrams, class diagrams, state diagrams, timelines, and many other diagram forms.819820## Source format821822The source format is **Mermaid text**. Enter the source in the diagram.zip editor.823824## Syntax essentials825826- Put the diagram keyword on the first line.827- Declare nodes, participants, or data after the keyword.828- Use the syntax for the selected Mermaid diagram form.829- diagram.zip rejects frontmatter settings that reduce renderer security.830831### Example832833```text834flowchart LR835 Idea[Idea] --> Agent[Agent]836 Agent --> Diagram[Shared diagram]837```838839## Limitations840841- diagram.zip removes active content and unsafe external resources from the SVG.842- Security configuration values cannot reduce the renderer security level.843844## Related pages845846- [Style Mermaid](/style/types/mermaid)847- [General presentation settings](/style/presentation)848- [Open Mermaid in the editor](https://diagram.zip/?type=mermaid)849850## Upstream reference851852[Mermaid documentation](https://mermaid.js.org/intro/)853854---855id: style-mermaid856slug: /style/types/mermaid857title: Mermaid858description: Style a Mermaid diagram in diagram.zip.859sidebar_label: Mermaid860---861862# Style Mermaid863864Mermaid supports themes, frontmatter configuration, class definitions, and diagram-specific configuration.865866Start with the [general presentation settings](/style/presentation). Edit shared or raw presentation in Details, and keep renderer-specific styling in Source.867868## Source controls869870- Use `classDef` and `class` in flowcharts.871- Use frontmatter for supported theme and layout values.872- Use Mermaid theme variables for controlled color changes.873874## Renderer options875876| Option | Values | Purpose |877| --- | --- | --- |878| `layout` | `dagre` or `elk`; mind maps can also use `tidy-tree` | Select a layout engine. |879| `Mermaid configuration` | Primitive values | Use kebab-case. Replace a configuration dot with an underscore. |880881## Limitations882883- diagram.zip removes active content and unsafe external resources from the SVG.884- Security configuration values cannot reduce the renderer security level.885886## Related pages887888- [Create a Mermaid diagram](/create/types/mermaid)889- [General presentation settings](/style/presentation)890- [SVG normalization and version contracts](/style/svg-normalization)891- [Open Mermaid in the editor](https://diagram.zip/?type=mermaid)892893---894895---896id: create-graphviz897slug: /create/types/graphviz898title: Graphviz899description: Create a Graphviz diagram in diagram.zip.900sidebar_label: Graphviz901---902903# Graphviz904905Graphviz creates directed and undirected graphs from the DOT language.906907## Use this type908909Use Graphviz when graph structure and automatic layout are more important than manual placement.910911## Source format912913The source format is **DOT text**. Enter the source in the diagram.zip editor.914915## Syntax essentials916917- Use `digraph` for directed edges.918- Use `graph` for undirected edges.919- Use `->` for a directed edge.920- Use `--` for an undirected edge.921- Put attributes in square brackets.922923### Example924925```text926digraph delivery {927 rankdir=LR928 idea -> agent -> diagram929}930```931932## Related pages933934- [Style Graphviz](/style/types/graphviz)935- [General presentation settings](/style/presentation)936- [Open Graphviz in the editor](https://diagram.zip/?type=graphviz)937938## Upstream reference939940[Graphviz documentation](https://graphviz.org/documentation/)941942---943id: style-graphviz944slug: /style/types/graphviz945title: Graphviz946description: Style a Graphviz diagram in diagram.zip.947sidebar_label: Graphviz948---949950# Style Graphviz951952DOT supports graph, node, and edge attributes.953954Start with the [general presentation settings](/style/presentation). Edit shared or raw presentation in Details, and keep renderer-specific styling in Source.955956## Source controls957958- Set graph defaults with a `graph` attribute statement.959- Set node defaults with a `node` attribute statement.960- Set edge defaults with an `edge` attribute statement.961- Add an attribute list to override one element.962963## Renderer options964965| Option | Values | Purpose |966| --- | --- | --- |967| `layout` | `dot`, `neato`, `fdp`, `sfdp`, `twopi`, or `circo` | Select the layout program. |968| `graph-attribute-{name}` | A DOT graph attribute value | Set one graph attribute. |969| `node-attribute-{name}` | A DOT node attribute value | Set one default node attribute. |970| `edge-attribute-{name}` | A DOT edge attribute value | Set one default edge attribute. |971| `scale` | Number; default is `72.0` | Set the input scale for position data. |972973## Related pages974975- [Create a Graphviz diagram](/create/types/graphviz)976- [General presentation settings](/style/presentation)977- [SVG normalization and version contracts](/style/svg-normalization)978- [Open Graphviz in the editor](https://diagram.zip/?type=graphviz)979980---981982---983id: create-d2984slug: /create/types/d2985title: D2986description: Create a D2 diagram in diagram.zip.987sidebar_label: D2988---989990# D2991992D2 creates modern diagrams from declarations, connections, containers, and style properties.993994## Use this type995996Use D2 for architecture diagrams, dependency graphs, process diagrams, and annotated technical sketches.997998## Source format9991000The source format is **D2 text**. Enter the source in the diagram.zip editor.10011002## Syntax essentials10031004- Declare a shape with an identifier and an optional label.1005- Use an arrow to connect two shapes.1006- Put nested elements inside braces.1007- Put style properties below `style`.10081009### Example10101011```text1012user: User1013agent: Agent1014diagram: "diagram.zip"1015user -> agent: request1016agent -> diagram: create1017```10181019## Related pages10201021- [Style D2](/style/types/d2)1022- [General presentation settings](/style/presentation)1023- [Open D2 in the editor](https://diagram.zip/?type=d2)10241025## Upstream reference10261027[D2 documentation](https://d2lang.com/tour/intro/)10281029---1030id: style-d21031slug: /style/types/d21032title: D21033description: Style a D2 diagram in diagram.zip.1034sidebar_label: D21035---10361037# Style D210381039D2 supports themes, shape properties, style blocks, classes, and sketch mode.10401041Start with the [general presentation settings](/style/presentation). Edit shared or raw presentation in Details, and keep renderer-specific styling in Source.10421043## Source controls10441045- Put local values in an element `style` block.1046- Define reusable classes when elements use the same style.1047- Use shape properties to control geometry and labels.10481049## Renderer options10501051| Option | Values | Purpose |1052| --- | --- | --- |1053| `theme` | D2 theme name or number | Apply a D2 theme. |1054| `layout` | `dagre` or `elk` | Select the layout engine. |1055| `sketch` | Flag | Apply the hand-drawn style. |10561057## Related pages10581059- [Create a D2 diagram](/create/types/d2)1060- [General presentation settings](/style/presentation)1061- [SVG normalization and version contracts](/style/svg-normalization)1062- [Open D2 in the editor](https://diagram.zip/?type=d2)10631064---10651066---1067id: create-c4plantuml1068slug: /create/types/c4plantuml1069title: C4 PlantUML1070description: Create a C4 PlantUML diagram in diagram.zip.1071sidebar_label: C4 PlantUML1072---10731074# C4 PlantUML10751076C4 PlantUML creates C4 software architecture diagrams with PlantUML macros.10771078## Use this type10791080Use C4 PlantUML for system landscape, system context, container, component, dynamic, and deployment views.10811082## Source format10831084The source format is **PlantUML with C4 macros**. Enter the source in the diagram.zip editor.10851086## Syntax essentials10871088- Start and end the source with PlantUML directives.1089- Include the required C4 library file.1090- Declare people, systems, containers, or components.1091- Use `Rel` macros to define relationships.10921093### Example10941095```text1096@startuml1097!include <C4/C4_Context>1098Person(user, "User")1099System(app, "diagram.zip")1100Rel(user, app, "Creates diagrams")1101@enduml1102```11031104## Related pages11051106- [Style C4 PlantUML](/style/types/c4plantuml)1107- [General presentation settings](/style/presentation)1108- [Open C4 PlantUML in the editor](https://diagram.zip/?type=c4plantuml)11091110## Upstream reference11111112[C4 PlantUML documentation](https://github.com/plantuml-stdlib/C4-PlantUML)11131114---1115id: style-c4plantuml1116slug: /style/types/c4plantuml1117title: C4 PlantUML1118description: Style a C4 PlantUML diagram in diagram.zip.1119sidebar_label: C4 PlantUML1120---11211122# Style C4 PlantUML11231124C4 PlantUML supports layout macros, tags, legends, and PlantUML style controls.11251126Start with the [general presentation settings](/style/presentation). Edit shared or raw presentation in Details, and keep renderer-specific styling in Source.11271128## Source controls11291130- Use C4 layout macros to change direction or spacing.1131- Use tags and element-style macros for reusable styles.1132- Use PlantUML theme and skin parameters only when they do not conflict with C4 macros.11331134## Renderer options11351136| Option | Values | Purpose |1137| --- | --- | --- |1138| `theme` | A supported PlantUML theme name | Apply the theme before diagram.zip renders the source. |1139| `no-metadata` | Flag | Remove the source metadata from the rendered image. |11401141## Related pages11421143- [Create a C4 PlantUML diagram](/create/types/c4plantuml)1144- [General presentation settings](/style/presentation)1145- [SVG normalization and version contracts](/style/svg-normalization)1146- [Open C4 PlantUML in the editor](https://diagram.zip/?type=c4plantuml)11471148---11491150---1151id: create-blockdiag1152slug: /create/types/blockdiag1153title: BlockDiag1154description: Create a BlockDiag diagram in diagram.zip.1155sidebar_label: BlockDiag1156---11571158# BlockDiag11591160BlockDiag creates block diagrams with automatic layout.11611162## Use this type11631164Use BlockDiag for systems, processes, and component relationships.11651166## Source format11671168The source format is **BlockDiag text**. Enter the source in the diagram.zip editor.11691170## Syntax essentials11711172- Put the diagram in a `blockdiag` block.1173- Separate statements with semicolons.1174- Use arrows to connect nodes.1175- Put node attributes in square brackets.11761177### Example11781179```text1180blockdiag {1181 idea -> agent -> diagram;1182 agent [color = "#dbeafe"];1183}1184```11851186## Related pages11871188- [Style BlockDiag](/style/types/blockdiag)1189- [General presentation settings](/style/presentation)1190- [Open BlockDiag in the editor](https://diagram.zip/?type=blockdiag)11911192## Upstream reference11931194[BlockDiag documentation](http://blockdiag.com/en/blockdiag/)11951196---1197id: style-blockdiag1198slug: /style/types/blockdiag1199title: BlockDiag1200description: Style a BlockDiag diagram in diagram.zip.1201sidebar_label: BlockDiag1202---12031204# Style BlockDiag12051206BlockDiag supports diagram attributes and per-node or per-edge attributes.12071208Start with the [general presentation settings](/style/presentation). Edit shared or raw presentation in Details, and keep renderer-specific styling in Source.12091210## Source controls12111212- Set orientation and default attributes in the diagram block.1213- Set colors, shapes, fonts, and sizes in node attributes.1214- Set line and label properties in edge attributes.12151216## Renderer options12171218| Option | Values | Purpose |1219| --- | --- | --- |1220| `antialias` | Flag | Apply the anti-alias filter. |1221| `size` | `widthxheight` | Set the image size. |1222| `no-doctype` | Flag | Remove the document type declaration from SVG output. |12231224## Related pages12251226- [Create a BlockDiag diagram](/create/types/blockdiag)1227- [General presentation settings](/style/presentation)1228- [SVG normalization and version contracts](/style/svg-normalization)1229- [Open BlockDiag in the editor](https://diagram.zip/?type=blockdiag)12301231---12321233---1234id: create-seqdiag1235slug: /create/types/seqdiag1236title: SeqDiag1237description: Create a SeqDiag diagram in diagram.zip.1238sidebar_label: SeqDiag1239---12401241# SeqDiag12421243SeqDiag creates sequence diagrams from message statements.12441245## Use this type12461247Use SeqDiag to show requests, responses, and ordered interactions.12481249## Source format12501251The source format is **SeqDiag text**. Enter the source in the diagram.zip editor.12521253## Syntax essentials12541255- Put the diagram in a `seqdiag` block.1256- Use arrows to send messages.1257- Use a left arrow for a response.1258- Put message attributes in square brackets.12591260### Example12611262```text1263seqdiag {1264 user -> agent [label = "Create diagram"];1265 user <-- agent [label = "Return link"];1266}1267```12681269## Related pages12701271- [Style SeqDiag](/style/types/seqdiag)1272- [General presentation settings](/style/presentation)1273- [Open SeqDiag in the editor](https://diagram.zip/?type=seqdiag)12741275## Upstream reference12761277[SeqDiag documentation](http://blockdiag.com/en/seqdiag/)12781279---1280id: style-seqdiag1281slug: /style/types/seqdiag1282title: SeqDiag1283description: Style a SeqDiag diagram in diagram.zip.1284sidebar_label: SeqDiag1285---12861287# Style SeqDiag12881289SeqDiag supports participant, message, and diagram attributes.12901291Start with the [general presentation settings](/style/presentation). Edit shared or raw presentation in Details, and keep renderer-specific styling in Source.12921293## Source controls12941295- Set participant colors and fonts in participant attributes.1296- Set message labels, colors, and line forms in message attributes.1297- Set diagram defaults in the diagram block.12981299## Renderer options13001301| Option | Values | Purpose |1302| --- | --- | --- |1303| `antialias` | Flag | Apply the anti-alias filter. |1304| `size` | `widthxheight` | Set the image size. |1305| `no-doctype` | Flag | Remove the document type declaration from SVG output. |13061307## Related pages13081309- [Create a SeqDiag diagram](/create/types/seqdiag)1310- [General presentation settings](/style/presentation)1311- [SVG normalization and version contracts](/style/svg-normalization)1312- [Open SeqDiag in the editor](https://diagram.zip/?type=seqdiag)13131314---13151316---1317id: create-actdiag1318slug: /create/types/actdiag1319title: ActDiag1320description: Create an ActDiag diagram in diagram.zip.1321sidebar_label: ActDiag1322---13231324# ActDiag13251326ActDiag creates activity diagrams with actions and lanes.13271328## Use this type13291330Use ActDiag to show a process across people, systems, or teams.13311332## Source format13331334The source format is **ActDiag text**. Enter the source in the diagram.zip editor.13351336## Syntax essentials13371338- Put the diagram in an `actdiag` block.1339- Use arrows to connect actions.1340- Put related actions in a `lane` block.1341- Put action attributes in square brackets.13421343### Example13441345```text1346actdiag {1347 write -> review -> share1348 lane user {1349 write; share;1350 }1351 lane agent {1352 review;1353 }1354}1355```13561357## Related pages13581359- [Style ActDiag](/style/types/actdiag)1360- [General presentation settings](/style/presentation)1361- [Open ActDiag in the editor](https://diagram.zip/?type=actdiag)13621363## Upstream reference13641365[ActDiag documentation](http://blockdiag.com/en/actdiag/)13661367---1368id: style-actdiag1369slug: /style/types/actdiag1370title: ActDiag1371description: Style a ActDiag diagram in diagram.zip.1372sidebar_label: ActDiag1373---13741375# Style ActDiag13761377ActDiag supports lane, action, edge, and diagram attributes.13781379Start with the [general presentation settings](/style/presentation). Edit shared or raw presentation in Details, and keep renderer-specific styling in Source.13801381## Source controls13821383- Set labels and colors on actions.1384- Set lane labels and colors in lane blocks.1385- Set edge labels and colors in edge attributes.13861387## Renderer options13881389| Option | Values | Purpose |1390| --- | --- | --- |1391| `antialias` | Flag | Apply the anti-alias filter. |1392| `size` | `widthxheight` | Set the image size. |1393| `no-doctype` | Flag | Remove the document type declaration from SVG output. |13941395## Related pages13961397- [Create an ActDiag diagram](/create/types/actdiag)1398- [General presentation settings](/style/presentation)1399- [SVG normalization and version contracts](/style/svg-normalization)1400- [Open ActDiag in the editor](https://diagram.zip/?type=actdiag)14011402---14031404---1405id: create-nwdiag1406slug: /create/types/nwdiag1407title: NwDiag1408description: Create a NwDiag diagram in diagram.zip.1409sidebar_label: NwDiag1410---14111412# NwDiag14131414NwDiag creates network diagrams from networks, addresses, and hosts.14151416## Use this type14171418Use NwDiag to show network segments and the devices that connect to them.14191420## Source format14211422The source format is **NwDiag text**. Enter the source in the diagram.zip editor.14231424## Syntax essentials14251426- Put the diagram in an `nwdiag` block.1427- Declare each network in a `network` block.1428- Declare hosts inside a network.1429- Use attributes for addresses and labels.14301431### Example14321433```text1434nwdiag {1435 network public {1436 address = "192.0.2.0/24";1437 gateway [address = "192.0.2.1"];1438 }1439}1440```14411442## Related pages14431444- [Style NwDiag](/style/types/nwdiag)1445- [General presentation settings](/style/presentation)1446- [Open NwDiag in the editor](https://diagram.zip/?type=nwdiag)14471448## Upstream reference14491450[NwDiag documentation](http://blockdiag.com/en/nwdiag/)14511452---1453id: style-nwdiag1454slug: /style/types/nwdiag1455title: NwDiag1456description: Style a NwDiag diagram in diagram.zip.1457sidebar_label: NwDiag1458---14591460# Style NwDiag14611462NwDiag supports network and host attributes.14631464Start with the [general presentation settings](/style/presentation). Edit shared or raw presentation in Details, and keep renderer-specific styling in Source.14651466## Source controls14671468- Set a network label, color, and address in its block.1469- Set host shape, color, label, and address in host attributes.1470- Repeat a host in two networks to show a connection.14711472## Renderer options14731474| Option | Values | Purpose |1475| --- | --- | --- |1476| `antialias` | Flag | Apply the anti-alias filter. |1477| `size` | `widthxheight` | Set the image size. |1478| `no-doctype` | Flag | Remove the document type declaration from SVG output. |14791480## Related pages14811482- [Create a NwDiag diagram](/create/types/nwdiag)1483- [General presentation settings](/style/presentation)1484- [SVG normalization and version contracts](/style/svg-normalization)1485- [Open NwDiag in the editor](https://diagram.zip/?type=nwdiag)14861487---14881489---1490id: create-packetdiag1491slug: /create/types/packetdiag1492title: PacketDiag1493description: Create a PacketDiag diagram in diagram.zip.1494sidebar_label: PacketDiag1495---14961497# PacketDiag14981499PacketDiag creates bit-field layouts for packets and binary records.15001501## Use this type15021503Use PacketDiag to show field positions, field widths, and grouped data.15041505## Source format15061507The source format is **PacketDiag text**. Enter the source in the diagram.zip editor.15081509## Syntax essentials15101511- Put the diagram in a `packetdiag` block.1512- Set the column width when the default is not correct.1513- Use bit ranges before field labels.1514- Use attributes for field height or label rotation.15151516### Example15171518```text1519packetdiag {1520 colwidth = 16;1521 0-3: Version;1522 4-7: Flags;1523 8-15: Length;1524}1525```15261527## Related pages15281529- [Style PacketDiag](/style/types/packetdiag)1530- [General presentation settings](/style/presentation)1531- [Open PacketDiag in the editor](https://diagram.zip/?type=packetdiag)15321533## Upstream reference15341535[PacketDiag documentation](http://blockdiag.com/en/nwdiag/packetdiag-examples.html)15361537---1538id: style-packetdiag1539slug: /style/types/packetdiag1540title: PacketDiag1541description: Style a PacketDiag diagram in diagram.zip.1542sidebar_label: PacketDiag1543---15441545# Style PacketDiag15461547PacketDiag supports global layout values and field attributes.15481549Start with the [general presentation settings](/style/presentation). Edit shared or raw presentation in Details, and keep renderer-specific styling in Source.15501551## Source controls15521553- Set column width and node height at the start of the block.1554- Set field color, height, and label rotation in field attributes.15551556## Renderer options15571558| Option | Values | Purpose |1559| --- | --- | --- |1560| `antialias` | Flag | Apply the anti-alias filter. |1561| `size` | `widthxheight` | Set the image size. |1562| `no-doctype` | Flag | Remove the document type declaration from SVG output. |15631564## Related pages15651566- [Create a PacketDiag diagram](/create/types/packetdiag)1567- [General presentation settings](/style/presentation)1568- [SVG normalization and version contracts](/style/svg-normalization)1569- [Open PacketDiag in the editor](https://diagram.zip/?type=packetdiag)15701571---15721573---1574id: create-rackdiag1575slug: /create/types/rackdiag1576title: RackDiag1577description: Create a RackDiag diagram in diagram.zip.1578sidebar_label: RackDiag1579---15801581# RackDiag15821583RackDiag creates equipment-rack diagrams from rack-unit positions.15841585## Use this type15861587Use RackDiag to document servers, switches, power units, and unused rack space.15881589## Source format15901591The source format is **RackDiag text**. Enter the source in the diagram.zip editor.15921593## Syntax essentials15941595- Put the diagram in a `rackdiag` block.1596- Declare the total rack height in rack units.1597- Put the start position before each device.1598- Put the device height in square brackets.15991600### Example16011602```text1603rackdiag {1604 8U;1605 1: UPS [2U];1606 3: Server [2U];1607 5: Switch;1608}1609```16101611## Related pages16121613- [Style RackDiag](/style/types/rackdiag)1614- [General presentation settings](/style/presentation)1615- [Open RackDiag in the editor](https://diagram.zip/?type=rackdiag)16161617## Upstream reference16181619[RackDiag documentation](http://blockdiag.com/en/nwdiag/rackdiag-examples.html)16201621---1622id: style-rackdiag1623slug: /style/types/rackdiag1624title: RackDiag1625description: Style a RackDiag diagram in diagram.zip.1626sidebar_label: RackDiag1627---16281629# Style RackDiag16301631RackDiag supports rack and device attributes.16321633Start with the [general presentation settings](/style/presentation). Edit shared or raw presentation in Details, and keep renderer-specific styling in Source.16341635## Source controls16361637- Set device labels, colors, and heights in device attributes.1638- Use rack-unit positions to control vertical placement.16391640## Renderer options16411642| Option | Values | Purpose |1643| --- | --- | --- |1644| `antialias` | Flag | Apply the anti-alias filter. |1645| `size` | `widthxheight` | Set the image size. |1646| `no-doctype` | Flag | Remove the document type declaration from SVG output. |16471648## Related pages16491650- [Create a RackDiag diagram](/create/types/rackdiag)1651- [General presentation settings](/style/presentation)1652- [SVG normalization and version contracts](/style/svg-normalization)1653- [Open RackDiag in the editor](https://diagram.zip/?type=rackdiag)16541655---16561657---1658id: create-bpmn1659slug: /create/types/bpmn1660title: BPMN1661description: Create a BPMN diagram in diagram.zip.1662sidebar_label: BPMN1663---16641665# BPMN16661667BPMN renders a BPMN 2.0 process definition from XML.16681669## Use this type16701671Use BPMN for formal business processes, decisions, events, tasks, and message flows.16721673## Source format16741675The source format is **BPMN 2.0 XML**. Enter the source in the diagram.zip editor.16761677## Syntax essentials16781679- Use a BPMN `definitions` root element.1680- Put process elements in a `process` element.1681- Give each referenced element a unique ID.1682- Include diagram interchange data when the XML must define positions.16831684### Source structure16851686This source shows the document structure. It is not a complete document.16871688```xml1689<bpmn:definitions xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL">1690 <bpmn:process id="Process_1">1691 <bpmn:startEvent id="Start" />1692 <bpmn:task id="Create" name="Create diagram" />1693 <bpmn:endEvent id="End" />1694 </bpmn:process>1695</bpmn:definitions>1696```16971698## Related pages16991700- [Style BPMN](/style/types/bpmn)1701- [General presentation settings](/style/presentation)1702- [Open BPMN in the editor](https://diagram.zip/?type=bpmn)17031704## Upstream reference17051706[BPMN documentation](https://www.omg.org/spec/BPMN/2.0/)17071708---1709id: style-bpmn1710slug: /style/types/bpmn1711title: BPMN1712description: Style a BPMN diagram in diagram.zip.1713sidebar_label: BPMN1714---17151716# Style BPMN17171718BPMN appearance usually comes from BPMN diagram interchange data and renderer defaults.17191720Start with the [general presentation settings](/style/presentation). Edit shared or raw presentation in Details, and keep renderer-specific styling in Source.17211722## Source controls17231724- Use BPMN diagram interchange bounds to set element positions.1725- Use BPMN diagram interchange waypoints to set connector paths.1726- Use supported extension attributes only when another BPMN tool must preserve them.1727## Related pages17281729- [Create a BPMN diagram](/create/types/bpmn)1730- [General presentation settings](/style/presentation)1731- [SVG normalization and version contracts](/style/svg-normalization)1732- [Open BPMN in the editor](https://diagram.zip/?type=bpmn)17331734---17351736---1737id: create-bytefield1738slug: /create/types/bytefield1739title: Bytefield1740description: Create a Bytefield diagram in diagram.zip.1741sidebar_label: Bytefield1742---17431744# Bytefield17451746Bytefield creates byte-oriented protocol diagrams from drawing forms.17471748## Use this type17491750Use Bytefield for byte layouts, headers, payloads, and protocol documentation.17511752## Source format17531754The source format is **bytefield-svg forms**. Enter the source in the diagram.zip editor.17551756## Syntax essentials17571758- Put one drawing form on each line.1759- Use `draw-box` to add a field.1760- Use a property map to set a span.1761- Use gap and bottom forms to complete the layout.17621763### Example17641765```clojure1766(draw-column-headers)1767(draw-box "Type" {:span 2})1768(draw-box "Length" {:span 2})1769(draw-gap "Payload")1770(draw-bottom)1771```17721773## Limitations17741775- diagram.zip returns SVG for this type.17761777## Related pages17781779- [Style Bytefield](/style/types/bytefield)1780- [General presentation settings](/style/presentation)1781- [Open Bytefield in the editor](https://diagram.zip/?type=bytefield)17821783## Upstream reference17841785[Bytefield documentation](https://bytefield-svg.deepsymmetry.org/)17861787---1788id: style-bytefield1789slug: /style/types/bytefield1790title: Bytefield1791description: Style a Bytefield diagram in diagram.zip.1792sidebar_label: Bytefield1793---17941795# Style Bytefield17961797Bytefield uses drawing-form properties for spans, labels, and layout.17981799Start with the [general presentation settings](/style/presentation). Edit shared or raw presentation in Details, and keep renderer-specific styling in Source.18001801## Source controls18021803- Use property maps on drawing forms.1804- Use custom drawing forms only when the renderer supports them.1805- Keep labels short when a field has a small span.1806## Limitations18071808- diagram.zip returns SVG for this type.18091810## Related pages18111812- [Create a Bytefield diagram](/create/types/bytefield)1813- [General presentation settings](/style/presentation)1814- [SVG normalization and version contracts](/style/svg-normalization)1815- [Open Bytefield in the editor](https://diagram.zip/?type=bytefield)18161817---18181819---1820id: create-dbml1821slug: /create/types/dbml1822title: DBML1823description: Create a DBML diagram in diagram.zip.1824sidebar_label: DBML1825---18261827# DBML18281829DBML creates database schemas from tables, fields, enums, indexes, and references.18301831## Use this type18321833Use DBML to document relational data models with a concise schema language.18341835## Source format18361837The source format is **Database Markup Language**. Enter the source in the diagram.zip editor.18381839## Syntax essentials18401841- Declare a table with a `Table` block.1842- Declare one field on each line.1843- Put field settings in square brackets.1844- Use `Ref` to define a relationship.18451846### Example18471848```sql1849Table users {1850 id integer [primary key]1851 name varchar1852}18531854Table diagrams {1855 id integer [primary key]1856 user_id integer1857}18581859Ref: diagrams.user_id > users.id1860```18611862## Related pages18631864- [Style DBML](/style/types/dbml)1865- [General presentation settings](/style/presentation)1866- [Open DBML in the editor](https://diagram.zip/?type=dbml)18671868## Upstream reference18691870[DBML documentation](https://dbml.dbdiagram.io/docs/)18711872---1873id: style-dbml1874slug: /style/types/dbml1875title: DBML1876description: Style a DBML diagram in diagram.zip.1877sidebar_label: DBML1878---18791880# Style DBML18811882DBML describes schema structure. It does not define visual presentation.18831884Start with the [general presentation settings](/style/presentation). Edit shared or raw presentation in Details, and keep renderer-specific styling in Source.18851886## Source controls18871888- Use notes and labels to improve the rendered meaning.1889- Use table groups to express related tables when the syntax version supports them.1890- Use general presentation settings for the outer canvas.1891## Related pages18921893- [Create a DBML diagram](/create/types/dbml)1894- [General presentation settings](/style/presentation)1895- [SVG normalization and version contracts](/style/svg-normalization)1896- [Open DBML in the editor](https://diagram.zip/?type=dbml)18971898---18991900---1901id: create-diagramsnet1902slug: /create/types/diagramsnet1903title: Diagrams.net1904description: Create a Diagrams.net diagram in diagram.zip.1905sidebar_label: Diagrams.net1906---19071908# Diagrams.net19091910Diagrams.net renders a diagram from its native XML document.19111912## Use this type19131914Use this type when diagrams.net is the source editor for the diagram.19151916## Source format19171918The source format is **diagrams.net XML**. Enter the source in the diagram.zip editor.19191920## Syntax essentials19211922- Use an `mxfile` document.1923- Put each page in a `diagram` element.1924- Store cells in an `mxGraphModel` structure.1925- Keep element IDs unique inside the document.19261927### Source structure19281929This source shows the document structure. It is not a complete document.19301931```xml1932<mxfile>1933 <diagram name="Page-1">1934 <mxGraphModel>1935 <root>1936 <mxCell id="0" />1937 <mxCell id="1" parent="0" />1938 </root>1939 </mxGraphModel>1940 </diagram>1941</mxfile>1942```19431944## Related pages19451946- [Style Diagrams.net](/style/types/diagramsnet)1947- [General presentation settings](/style/presentation)1948- [Open Diagrams.net in the editor](https://diagram.zip/?type=diagramsnet)19491950## Upstream reference19511952[Diagrams.net documentation](https://www.diagrams.net/doc/faq/diagram-source-edit)19531954---1955id: style-diagramsnet1956slug: /style/types/diagramsnet1957title: Diagrams.net1958description: Style a Diagrams.net diagram in diagram.zip.1959sidebar_label: Diagrams.net1960---19611962# Style Diagrams.net19631964Diagrams.net stores geometry and style values on cells in the XML source.19651966Start with the [general presentation settings](/style/presentation). Edit shared or raw presentation in Details, and keep renderer-specific styling in Source.19671968## Source controls19691970- Use the diagrams.net editor to change cell styles safely.1971- The `style` attribute contains semicolon-separated cell settings.1972- The geometry element contains the position and size.1973## Related pages19741975- [Create a Diagrams.net diagram](/create/types/diagramsnet)1976- [General presentation settings](/style/presentation)1977- [SVG normalization and version contracts](/style/svg-normalization)1978- [Open Diagrams.net in the editor](https://diagram.zip/?type=diagramsnet)19791980---19811982---1983id: create-ditaa1984slug: /create/types/ditaa1985title: Ditaa1986description: Create a Ditaa diagram in diagram.zip.1987sidebar_label: Ditaa1988---19891990# Ditaa19911992Ditaa converts an ASCII-art drawing into a clean diagram.19931994## Use this type19951996Use Ditaa when the source must remain readable as plain text.19971998## Source format19992000The source format is **ASCII diagram text**. Enter the source in the diagram.zip editor.20012002## Syntax essentials20032004- Use ASCII lines to draw boxes and connectors.2005- Put text inside a closed shape.2006- Use arrowheads to set connector direction.2007- Use Ditaa tags to set shape and color behavior.20082009### Example20102011```text2012+--------+ +-------------+2013| User |------>| diagram.zip |2014+--------+ +-------------+2015```20162017## Related pages20182019- [Style Ditaa](/style/types/ditaa)2020- [General presentation settings](/style/presentation)2021- [Open Ditaa in the editor](https://diagram.zip/?type=ditaa)20222023## Upstream reference20242025[Ditaa documentation](https://github.com/stathissideris/ditaa)20262027---2028id: style-ditaa2029slug: /style/types/ditaa2030title: Ditaa2031description: Style a Ditaa diagram in diagram.zip.2032sidebar_label: Ditaa2033---20342035# Style Ditaa20362037Ditaa supports shape tags, color tags, dashed lines, and renderer options.20382039Start with the [general presentation settings](/style/presentation). Edit shared or raw presentation in Details, and keep renderer-specific styling in Source.20402041## Source controls20422043- Add a six-character color tag such as `{cBLU}` inside a shape.2044- Use shape tags such as `{d}` for a document.2045- Use the Ditaa line characters to control corners and connectors.20462047## Renderer options20482049| Option | Values | Purpose |2050| --- | --- | --- |2051| `no-antialias` | Flag | Turn off anti-aliasing. |2052| `no-separation` | Flag | Do not separate common shape edges. |2053| `round-corners` | Flag | Use round corners. |2054| `scale` | Number; default is `1.0` | Scale the diagram. |2055| `no-shadows` | Flag | Turn off shadows. |2056| `tabs` | Number | Set the tab width. |2057| `background` | Six hexadecimal digits, for example `FFFFFF` | Set the image background. |2058| `transparent` | Flag | Use a transparent background. |20592060## Related pages20612062- [Create a Ditaa diagram](/create/types/ditaa)2063- [General presentation settings](/style/presentation)2064- [SVG normalization and version contracts](/style/svg-normalization)2065- [Open Ditaa in the editor](https://diagram.zip/?type=ditaa)20662067---20682069---2070id: create-erd2071slug: /create/types/erd2072title: ERD2073description: Create an ERD diagram in diagram.zip.2074sidebar_label: ERD2075---20762077# ERD20782079ERD creates entity-relationship diagrams from entities, attributes, and cardinalities.20802081## Use this type20822083Use ERD for compact relational models and domain data models.20842085## Source format20862087The source format is **ERD text**. Enter the source in the diagram.zip editor.20882089## Syntax essentials20902091- Put an entity name in square brackets.2092- Put each attribute below its entity.2093- Use `*` for a key attribute.2094- Use a relationship line with cardinality markers.20952096### Example20972098```text2099[User]2100*id2101name21022103[Diagram]2104*id2105+user_id21062107[User] 1--* [Diagram]2108```21092110## Related pages21112112- [Style ERD](/style/types/erd)2113- [General presentation settings](/style/presentation)2114- [Open ERD in the editor](https://diagram.zip/?type=erd)21152116## Upstream reference21172118[ERD documentation](https://github.com/BurntSushi/erd)21192120---2121id: style-erd2122slug: /style/types/erd2123title: ERD2124description: Style a ERD diagram in diagram.zip.2125sidebar_label: ERD2126---21272128# Style ERD21292130ERD focuses on the data model. The renderer controls most visual values.21312132Start with the [general presentation settings](/style/presentation). Edit shared or raw presentation in Details, and keep renderer-specific styling in Source.21332134## Source controls21352136- Use clear entity and attribute names.2137- Use key and relationship markers consistently.2138- Use general presentation settings for the outer canvas.2139## Related pages21402141- [Create an ERD diagram](/create/types/erd)2142- [General presentation settings](/style/presentation)2143- [SVG normalization and version contracts](/style/svg-normalization)2144- [Open ERD in the editor](https://diagram.zip/?type=erd)21452146---21472148---2149id: create-excalidraw2150slug: /create/types/excalidraw2151title: Excalidraw2152description: Create an Excalidraw diagram in diagram.zip.2153sidebar_label: Excalidraw2154---21552156# Excalidraw21572158Excalidraw renders a hand-drawn diagram from an Excalidraw JSON document.21592160## Use this type21612162Use this type when Excalidraw is the source editor for the diagram.21632164## Source format21652166The source format is **Excalidraw JSON**. Enter the source in the diagram.zip editor.21672168## Syntax essentials21692170- Use an Excalidraw JSON object.2171- Put drawable objects in the `elements` array.2172- Put document settings in the `appState` object.2173- Keep element IDs unique.21742175### Source structure21762177This source shows the document structure. It is not a complete document.21782179```json2180{2181 "type": "excalidraw",2182 "version": 2,2183 "elements": [],2184 "appState": {2185 "viewBackgroundColor": "#ffffff"2186 }2187}2188```21892190## Related pages21912192- [Style Excalidraw](/style/types/excalidraw)2193- [General presentation settings](/style/presentation)2194- [Open Excalidraw in the editor](https://diagram.zip/?type=excalidraw)21952196## Upstream reference21972198[Excalidraw documentation](https://docs.excalidraw.com/docs/codebase/json-schema/)21992200---2201id: style-excalidraw2202slug: /style/types/excalidraw2203title: Excalidraw2204description: Style a Excalidraw diagram in diagram.zip.2205sidebar_label: Excalidraw2206---22072208# Style Excalidraw22092210Excalidraw stores the style of each element in the JSON source.22112212Start with the [general presentation settings](/style/presentation). Edit shared or raw presentation in Details, and keep renderer-specific styling in Source.22132214## Source controls22152216- Use the Excalidraw editor to change element styles safely.2217- Element values include stroke, fill, roughness, opacity, and font properties.2218- The application state can define the source canvas color.2219## Related pages22202221- [Create an Excalidraw diagram](/create/types/excalidraw)2222- [General presentation settings](/style/presentation)2223- [SVG normalization and version contracts](/style/svg-normalization)2224- [Open Excalidraw in the editor](https://diagram.zip/?type=excalidraw)22252226---22272228---2229id: create-goat2230slug: /create/types/goat2231title: GoAT2232description: Create a GoAT diagram in diagram.zip.2233sidebar_label: GoAT2234---22352236# GoAT22372238GoAT converts ASCII-art diagrams into SVG.22392240## Use this type22412242Use GoAT for boxes, arrows, grids, and compact diagrams that remain useful as text.22432244## Source format22452246The source format is **ASCII diagram text**. Enter the source in the diagram.zip editor.22472248## Syntax essentials22492250- Use ASCII or supported Unicode line characters.2251- Close shapes when you need filled regions.2252- Add arrowheads at the end of a connector.2253- Keep labels away from connector intersections.22542255### Example22562257```text2258+-------------------+ ^ .---.2259| ‗A Box‗ |__.--.__ __.--> | .-. | |2260| | '--' v | * |<--- | |2261+-------------------+ '-' | |2262 `Round` *---(-. |2263 .-----------------. .-------. .----------. .-------. | | |2264 | Mixed Rounded | | | / Diagonals \ | | | | | |2265 | & Square Corners | '--. .--' / \ |---+---| '-)-' .--------.2266 '--+------------+-' .--. | '-------+--------' | | | | / Search /2267 | | | | '---. | '-------' | '-+------'2268 |<---------->| | | | v Interior | ^2269 ' <---' '----' .-----------. ---. .--- v |2270 .------------------. Diag line | .-------. +---. \ / . |2271 | if (a > b) +---. .--->| | | | |`Curved line` \ / / \ |2272 | obj->fcn() | \ / | '-------' |<--' + / \ |2273 '------------------' '--' '--+--------' .--. .--. | .-. +Done?+-'2274 .---+-----. | ^ |\ | | /| .--+ | | \ /2275 | | | Join \|/ | | `Curved` | \| |/ | | \ | \ /2276 | | +----> o --o-- '-' Vertical '--' '--' '-- '--' + .---.2277 <--+---+-----' | /|\ | | 3 |2278 v not:line 'quotes' .-' '---'2279 .-. .---+--------. / A || B ·bold· | ^2280 | | | Not a dot | <---+---<-- A dash--is not a line v |2281 '-' '---------+--' / Nor/is this. ---2282```22832284## Related pages22852286- [Style GoAT](/style/types/goat)2287- [General presentation settings](/style/presentation)2288- [Open GoAT in the editor](https://diagram.zip/?type=goat)22892290## Upstream reference22912292[GoAT documentation](https://github.com/blampe/goat)22932294---2295id: style-goat2296slug: /style/types/goat2297title: GoAT2298description: Style a GoAT diagram in diagram.zip.2299sidebar_label: GoAT2300---23012302# Style GoAT23032304GoAT takes most geometry from the text. Renderer options control SVG colors and character handling.23052306Start with the [general presentation settings](/style/presentation). Edit shared or raw presentation in Details, and keep renderer-specific styling in Source.23072308## Source controls23092310- Change the text geometry to change placement.2311- Use supported line and corner characters for the required shape.2312- Use labels inside or near the related shape.23132314## Renderer options23152316| Option | Values | Purpose |2317| --- | --- | --- |2318| `svg-color-dark-scheme` | CSS color; default is `#FFF` | Set the foreground color for a dark color scheme. |2319| `svg-color-light-scheme` | CSS color; default is `#000` | Set the foreground color for a light color scheme. |2320| `utf8` | Flag | Treat Unicode box characters as the drawing characters. |23212322## Related pages23232324- [Create a GoAT diagram](/create/types/goat)2325- [General presentation settings](/style/presentation)2326- [SVG normalization and version contracts](/style/svg-normalization)2327- [Open GoAT in the editor](https://diagram.zip/?type=goat)23282329---23302331---2332id: create-nomnoml2333slug: /create/types/nomnoml2334title: Nomnoml2335description: Create a Nomnoml diagram in diagram.zip.2336sidebar_label: Nomnoml2337---23382339# Nomnoml23402341Nomnoml creates UML-style diagrams from bracketed classifiers and relationships.23422343## Use this type23442345Use Nomnoml for fast class, component, and relationship sketches.23462347## Source format23482349The source format is **Nomnoml text**. Enter the source in the diagram.zip editor.23502351## Syntax essentials23522353- Put each classifier in square brackets.2354- Separate name, attributes, and methods with a vertical bar.2355- Connect classifiers with a relationship operator.2356- Put directives at the start of the source.23572358### Example23592360```text2361#direction: right2362[User]->[Diagram]2363[Diagram|title: string|save(); share()]2364```23652366## Limitations23672368- diagram.zip returns SVG for this type.23692370## Related pages23712372- [Style Nomnoml](/style/types/nomnoml)2373- [General presentation settings](/style/presentation)2374- [Open Nomnoml in the editor](https://diagram.zip/?type=nomnoml)23752376## Upstream reference23772378[Nomnoml documentation](https://nomnoml.com/)23792380---2381id: style-nomnoml2382slug: /style/types/nomnoml2383title: Nomnoml2384description: Style a Nomnoml diagram in diagram.zip.2385sidebar_label: Nomnoml2386---23872388# Style Nomnoml23892390Nomnoml uses hash directives and custom classifier styles.23912392Start with the [general presentation settings](/style/presentation). Edit shared or raw presentation in Details, and keep renderer-specific styling in Source.23932394## Source controls23952396- Use directives such as `#direction`, `#font`, and `#spacing`.2397- Define a custom classifier style with `#.name`.2398- Apply a classifier style with an angle-bracket type name.2399## Limitations24002401- diagram.zip returns SVG for this type.24022403## Related pages24042405- [Create a Nomnoml diagram](/create/types/nomnoml)2406- [General presentation settings](/style/presentation)2407- [SVG normalization and version contracts](/style/svg-normalization)2408- [Open Nomnoml in the editor](https://diagram.zip/?type=nomnoml)24092410---24112412---2413id: create-pikchr2414slug: /create/types/pikchr2415title: Pikchr2416description: Create a Pikchr diagram in diagram.zip.2417sidebar_label: Pikchr2418---24192420# Pikchr24212422Pikchr creates precise technical drawings from relative placement commands.24232424## Use this type24252426Use Pikchr when you need controlled geometry and readable text source.24272428## Source format24292430The source format is **Pikchr text**. Enter the source in the diagram.zip editor.24312432## Syntax essentials24332434- Create objects with commands such as `box`, `circle`, and `arrow`.2435- Use directions and anchor names for relative placement.2436- Assign a name when another command must reference an object.2437- Put text in quoted strings.24382439### Example24402441```text2442box "User"2443arrow right 0.62444box "diagram.zip"2445```24462447## Related pages24482449- [Style Pikchr](/style/types/pikchr)2450- [General presentation settings](/style/presentation)2451- [Open Pikchr in the editor](https://diagram.zip/?type=pikchr)24522453## Upstream reference24542455[Pikchr documentation](https://pikchr.org/home/doc/trunk/doc/userman.md)24562457---2458id: style-pikchr2459slug: /style/types/pikchr2460title: Pikchr2461description: Style a Pikchr diagram in diagram.zip.2462sidebar_label: Pikchr2463---24642465# Style Pikchr24662467Pikchr supports dimensions, colors, fills, line widths, and placement controls in the source.24682469Start with the [general presentation settings](/style/presentation). Edit shared or raw presentation in Details, and keep renderer-specific styling in Source.24702471## Source controls24722473- Add `fill` and `color` values to an object.2474- Set global dimensions before the related objects.2475- Use object anchors for stable relative placement.2476## Related pages24772478- [Create a Pikchr diagram](/create/types/pikchr)2479- [General presentation settings](/style/presentation)2480- [SVG normalization and version contracts](/style/svg-normalization)2481- [Open Pikchr in the editor](https://diagram.zip/?type=pikchr)24822483---24842485---2486id: create-squaring2487slug: /create/types/squaring2488title: Squaring2489description: Create a Squaring diagram in diagram.zip.2490sidebar_label: Squaring2491---24922493# Squaring24942495Squaring draws a squared rectangle, which is a rectangle tiled by squares, next to its Smith diagram. In that circuit every horizontal segment is a node and every square is a unit resistor whose current equals its side.24962497## Use this type24982499Use Squaring to explore squared rectangles and squared squares, or to check whether a dissection is simple and perfect. Sketch one with unknown sides and let the solver close it. Or build one backwards from a planar network by choosing or searching the battery edge.25002501## Source format25022503The source format is **Squaring text**. Enter the source in the diagram.zip editor.25042505## Syntax essentials25062507- Optionally begin with `.view rectangle`, `.view circuit`, `.view overlay`, or `.view both`; the default is `both`.2508- Add `.labels none` to hide side lengths, voltages, and currents.2509- Add `title` followed by text to name the diagram.2510- For a known dissection, write `rectangle <width> x <height>` and then the square sides in Bouwkamp order; parentheses and commas are ignored.2511- Bouwkamp order places each square at the leftmost point of the highest unfilled segment. Squares that share a top edge are listed left to right.2512- Write `rectangle ? x ?` to infer the size; the first group is then the top row.2513- A `?` side is a square as wide as the gap it lands in. Squares that do not fit stop placement, and the rest of the rectangle is hatched.2514- For a sketch, name sides with letters or expressions such as `a`, `2a`, or `a+b`. Every later group needs an `under` clause such as `(g h) under f c`, listing the squares it rests on from left to right.2515- The sketch solver scales the unique solution to whole numbers, or reports free lengths, contradictions, or a fractional side.2516- For a network, write `battery <positive> <negative>` and then wires as `wire a b`, chains such as `a - b - c`, `face a b c d` polygons, or `polyhedron cube`.2517- Write `battery any` to try every wire as the battery; the best result is drawn and every candidate is listed.2518- The battery replaces one edge of the graph, so do not list that edge as a wire. A wire parallel to the battery becomes a full-height square.2519- Every wire has resistance one; the renderer solves Kirchhoff and Ohm exactly, scales the voltages so all sides are whole numbers, and arranges the squares.2520- The network form needs a planar network in which the battery closes a face; polyhedral (3-connected planar) networks give a simple squaring.2521- Symmetric solids often fail for every battery because mirror-image nodes settle at the same voltage; asymmetric polyhedra work best.2522- The caption reports the order, size, whether the squaring is simple (no smaller rectangle of squares) and perfect (no repeated side), and the battery.2523- Compound blocks are outlined; node color runs from blue at the negative pole to red at the positive pole.2524- Start comments with `#`.25252526### Example25272528```text2529.view both2530title Order 9 simple perfect squared rectangle25312532rectangle 33 x 322533squares (18 15) (7 8) (14 4) (10 1) (9)2534```25352536## Origin25372538Squaring originates with [Brooks, Smith, Stone, and Tutte](https://doi.org/10.1215/S0012-7094-40-00718-9) at [The dissection of rectangles into squares (Duke Mathematical Journal, 1940)](https://doi.org/10.1215/S0012-7094-40-00718-9). Diagram.zip implements a text notation and SVG renderer for the squared-rectangle and Smith-diagram correspondence that the four Trinity students discovered.25392540## Limitations25412542- Networks are arranged by search, so very large or non-planar networks are rejected instead of drawn.2543- A wire whose two nodes settle at the same voltage carries no current and is rejected; choose another battery or use `battery any`.2544- `battery any` is limited to networks with at most 60 wires.2545- Node positions in the Smith diagram follow the midpoints of the horizontal segments rather than a spring layout.25462547## Related pages25482549- [Style Squaring](/style/types/squaring)2550- [General presentation settings](/style/presentation)2551- [Open Squaring in the editor](https://diagram.zip/?type=squaring)25522553## Upstream reference25542555[Squaring documentation](https://www.squaring.net/)25562557---2558id: style-squaring2559slug: /style/types/squaring2560title: Squaring2561description: Style a Squaring diagram in diagram.zip.2562sidebar_label: Squaring2563---25642565# Style Squaring25662567Squaring colors each square and node by voltage from blue to red and scales wire thickness by current. Light and dark appearances use their own square, node, and wire palettes, and compound blocks are outlined with a dashed line.25682569Start with the [general presentation settings](/style/presentation). Edit shared or raw presentation in Details, and keep renderer-specific styling in Source.25702571## Source controls25722573- Use `.view rectangle` for the dissection alone and `.view circuit` for the Smith diagram alone.2574- Incomplete dissections always render as the rectangle view with hatched gaps.2575- Use `.view overlay` to draw the circuit on top of the squares, which shows how each segment collapses into a node.2576- Use `.labels none` for large dissections where numbers would not fit.2577- Choose a different battery wire in a network to obtain a different squaring from the same graph.2578- Reorder the square list, not the geometry, to change a Bouwkamp dissection.2579## Limitations25802581- Networks are arranged by search, so very large or non-planar networks are rejected instead of drawn.2582- A wire whose two nodes settle at the same voltage carries no current and is rejected; choose another battery or use `battery any`.2583- `battery any` is limited to networks with at most 60 wires.2584- Node positions in the Smith diagram follow the midpoints of the horizontal segments rather than a spring layout.25852586## Related pages25872588- [Create a Squaring diagram](/create/types/squaring)2589- [General presentation settings](/style/presentation)2590- [SVG normalization and version contracts](/style/svg-normalization)2591- [Open Squaring in the editor](https://diagram.zip/?type=squaring)25922593---25942595---2596id: create-structurizr2597slug: /create/types/structurizr2598title: Structurizr2599description: Create a Structurizr diagram in diagram.zip.2600sidebar_label: Structurizr2601---26022603# Structurizr26042605Structurizr creates C4 architecture views from a workspace model.26062607## Use this type26082609Use Structurizr when one model must produce multiple software architecture views.26102611## Source format26122613The source format is **Structurizr DSL**. Enter the source in the diagram.zip editor.26142615## Syntax essentials26162617- Put the model and views in a `workspace` block.2618- Declare people, systems, containers, and components in the model.2619- Declare relationships in the model.2620- Select elements and layout rules in each view.26212622### Example26232624```text2625workspace {2626 model {2627 user = person "User"2628 app = softwareSystem "diagram.zip"2629 user -> app "Creates diagrams"2630 }2631 views {2632 systemLandscape { include *; autolayout lr }2633 }2634}2635```26362637## Related pages26382639- [Style Structurizr](/style/types/structurizr)2640- [General presentation settings](/style/presentation)2641- [Open Structurizr in the editor](https://diagram.zip/?type=structurizr)26422643## Upstream reference26442645[Structurizr documentation](https://docs.structurizr.com/dsl)26462647---2648id: style-structurizr2649slug: /style/types/structurizr2650title: Structurizr2651description: Style a Structurizr diagram in diagram.zip.2652sidebar_label: Structurizr2653---26542655# Style Structurizr26562657Structurizr supports workspace styles, themes, tags, and automatic layout.26582659Start with the [general presentation settings](/style/presentation). Edit shared or raw presentation in Details, and keep renderer-specific styling in Source.26602661## Source controls26622663- Add tags to model elements and relationships.2664- Define tag styles in the view configuration.2665- Use a theme when the source is trusted and the theme is available.2666- Use `autolayout` to set layout direction.26672668## Renderer options26692670| Option | Values | Purpose |2671| --- | --- | --- |2672| `view-key` | A view key | Render one view from a workspace that contains multiple views. |2673| `output` | `diagram` or `legend` | Render the selected view or its legend. |26742675## Related pages26762677- [Create a Structurizr diagram](/create/types/structurizr)2678- [General presentation settings](/style/presentation)2679- [SVG normalization and version contracts](/style/svg-normalization)2680- [Open Structurizr in the editor](https://diagram.zip/?type=structurizr)26812682---26832684---2685id: create-svgbob2686slug: /create/types/svgbob2687title: Svgbob2688description: Create a Svgbob diagram in diagram.zip.2689sidebar_label: Svgbob2690---26912692# Svgbob26932694Svgbob converts ASCII-art diagrams into SVG.26952696## Use this type26972698Use Svgbob for boxes, arrows, circuits, and diagrams that must remain readable as text.26992700## Source format27012702The source format is **ASCII diagram text**. Enter the source in the diagram.zip editor.27032704## Syntax essentials27052706- Use ASCII or supported Unicode drawing characters.2707- Close shapes when you need filled regions.2708- Put arrowheads at connector ends.2709- Put labels where they do not touch a line.27102711### Example27122713```text2714+------+ +---------+2715| User |------>| Diagram |2716+------+ +---------+2717```27182719## Related pages27202721- [Style Svgbob](/style/types/svgbob)2722- [General presentation settings](/style/presentation)2723- [Open Svgbob in the editor](https://diagram.zip/?type=svgbob)27242725## Upstream reference27262727[Svgbob documentation](https://ivanceras.github.io/svgbob-editor/)27282729---2730id: style-svgbob2731slug: /style/types/svgbob2732title: Svgbob2733description: Style a Svgbob diagram in diagram.zip.2734sidebar_label: Svgbob2735---27362737# Style Svgbob27382739Svgbob takes geometry from the text and supports renderer-level SVG settings.27402741Start with the [general presentation settings](/style/presentation). Edit shared or raw presentation in Details, and keep renderer-specific styling in Source.27422743## Source controls27442745- Change the source spacing to change object placement.2746- Use supported characters to select line and corner forms.2747- Use renderer options for uniform color and font changes.27482749## Renderer options27502751| Option | Values | Purpose |2752| --- | --- | --- |2753| `background` | CSS color; default is `white` | Set the SVG background. |2754| `font-family` | Font family; default is `arial` | Set the label font. |2755| `font-size` | Integer; default is `14` | Set the label font size. |2756| `fill-color` | CSS color; default is `black` | Set the solid-shape fill. |2757| `scale` | Number; default is `1` | Scale the SVG. |2758| `stroke-width` | Number; default is `2` | Set the line width. |27592760## Related pages27612762- [Create a Svgbob diagram](/create/types/svgbob)2763- [General presentation settings](/style/presentation)2764- [SVG normalization and version contracts](/style/svg-normalization)2765- [Open Svgbob in the editor](https://diagram.zip/?type=svgbob)27662767---27682769---2770id: create-symbolator2771slug: /create/types/symbolator2772title: Symbolator2773description: Create a Symbolator diagram in diagram.zip.2774sidebar_label: Symbolator2775---27762777# Symbolator27782779Symbolator creates a component symbol from a hardware module declaration.27802781## Use this type27822783Use Symbolator to document component ports, directions, groups, and data widths.27842785## Source format27862787The source format is **VHDL or Verilog source**. Enter the source in the diagram.zip editor.27882789## Syntax essentials27902791- Declare a VHDL entity or a Verilog module.2792- Declare the ports that must appear in the symbol.2793- Use supported comments to group ports.2794- Select the component when the source has more than one.27952796### Example27972798```text2799module diagram (2800 input wire clock,2801 input wire data_in,2802 output wire data_out2803);2804endmodule2805```28062807## Related pages28082809- [Style Symbolator](/style/types/symbolator)2810- [General presentation settings](/style/presentation)2811- [Open Symbolator in the editor](https://diagram.zip/?type=symbolator)28122813## Upstream reference28142815[Symbolator documentation](https://github.com/kevinpt/symbolator)28162817---2818id: style-symbolator2819slug: /style/types/symbolator2820title: Symbolator2821description: Style a Symbolator diagram in diagram.zip.2822sidebar_label: Symbolator2823---28242825# Style Symbolator28262827Symbolator gets structure from hardware source. Renderer options control the title, scale, and output details.28282829Start with the [general presentation settings](/style/presentation). Edit shared or raw presentation in Details, and keep renderer-specific styling in Source.28302831## Source controls28322833- Use supported port-group comments to organize the symbol.2834- Use clear port and parameter names.2835- Use renderer options for the title and scale.28362837## Renderer options28382839| Option | Values | Purpose |2840| --- | --- | --- |2841| `component` | Component name | Select the component to render. |2842| `transparent` | Flag | Use a transparent background. |2843| `title` | Text | Add a title. |2844| `scale` | Number; default is `1.0` | Scale the diagram. |2845| `no-type` | Flag | Remove port type data. |2846| `library-name` | Text | Add a library name when the title is present. |28472848## Related pages28492850- [Create a Symbolator diagram](/create/types/symbolator)2851- [General presentation settings](/style/presentation)2852- [SVG normalization and version contracts](/style/svg-normalization)2853- [Open Symbolator in the editor](https://diagram.zip/?type=symbolator)28542855---28562857---2858id: create-tikz2859slug: /create/types/tikz2860title: TikZ2861description: Create a TikZ diagram in diagram.zip.2862sidebar_label: TikZ2863---28642865# TikZ28662867TikZ creates precise diagrams with TeX drawing commands.28682869## Use this type28702871Use TikZ for mathematical, scientific, geometric, and publication-quality diagrams.28722873## Source format28742875The source format is **TeX with TikZ**. Enter the source in the diagram.zip editor.28762877## Syntax essentials28782879- Put drawing commands in a `tikzpicture` environment.2880- Create shapes with commands such as `node`, `draw`, and `path`.2881- Put options in square brackets.2882- Terminate each path command with a semicolon.28832884### Example28852886```text2887\begin{tikzpicture}2888 \node (user) at (0,0) {User};2889 \node (diagram) at (3,0) {diagram.zip};2890 \draw[->] (user) -- (diagram);2891\end{tikzpicture}2892```28932894## Related pages28952896- [Style TikZ](/style/types/tikz)2897- [General presentation settings](/style/presentation)2898- [Open TikZ in the editor](https://diagram.zip/?type=tikz)28992900## Upstream reference29012902[TikZ documentation](https://ctan.org/pkg/pgf)29032904---2905id: style-tikz2906slug: /style/types/tikz2907title: TikZ2908description: Style a TikZ diagram in diagram.zip.2909sidebar_label: TikZ2910---29112912# Style TikZ29132914TikZ supports colors, line forms, fills, node styles, scopes, and reusable style definitions.29152916Start with the [general presentation settings](/style/presentation). Edit shared or raw presentation in Details, and keep renderer-specific styling in Source.29172918## Source controls29192920- Put local drawing options in square brackets.2921- Define reusable styles with `tikzset`.2922- Use scopes to apply a style to a group.2923- Load only the libraries that the diagram needs.2924## Related pages29252926- [Create a TikZ diagram](/create/types/tikz)2927- [General presentation settings](/style/presentation)2928- [SVG normalization and version contracts](/style/svg-normalization)2929- [Open TikZ in the editor](https://diagram.zip/?type=tikz)29302931---29322933---2934id: create-trn2935slug: /create/types/trn2936title: TRN2937description: Create a TRN diagram in diagram.zip.2938sidebar_label: TRN2939---29402941# TRN29422943TRN stands for Tabular Recipe Notation. It shows how ingredients and intermediate outcomes combine into one or more final results.29442945## Use this type29462947Use TRN for recipes, crafting trees, assembly instructions, and other nested transformations.29482949## Source format29502951The source format is **Tabular Recipe Notation text**. Enter the source in the diagram.zip editor.29522953## Syntax essentials29542955- Optionally begin with `.layout combined` or `.layout individual`; the default is `combined`.2956- Declare each leaf value with `ingredient`.2957- Declare a meaningful final or reusable result with an `outcome` block.2958- Keep incidental conversions, such as ore to bars, as steps inside the outcome that consumes them.2959- Add a full-width preparation row with `instruction`.2960- Long instruction rows wrap and grow vertically to preserve their complete text.2961- Add a quoted display label after an identifier when needed.2962- Each `+` queues an input for the next `->`; place it immediately before the operation that consumes it.2963- Columns represent dependency depth. Independent operations on disjoint inputs can share a column.2964- Consecutive `->` lines without a new input extend the same branch from left to right.2965- Write one complete instruction in each `->` step.2966- Combined layout places prerequisite outcomes before direct ingredients in stable FIFO order.2967- Add `portion` after an outcome label or identifier when the result has a useful quantity.2968- Use `{portion}` in an action to embed that outcome quantity.2969- Start comments with `#`; OCR importers should record uncertain text in comments instead of guessing.29702971### Example29722973```text2974.layout combined29752976ingredient flour "Bread flour"2977ingredient water2978ingredient yeast2979ingredient salt29802981outcome bread portion 1 loaf {2982 + flour 500 g2983 + water 350 ml2984 + yeast 7 g2985 + salt 10 g2986 -> mix2987 -> knead2988 -> proof for 1 hour2989 -> bake {portion} at 230°C for 30 minutes2990}2991```299229932994## Public authoring contract29952996- Treat TRN source as the only public geometry control surface.2997- Select combined or individual geometry with the `.layout` directive.2998- Presentation appearance changes palette and canvas treatment. It does not change TRN layout, orientation, wrapping, or packing.2999- Edit the TRN source and request a new render.3000- Do not edit generated SVG, CSS classes, data attributes, viewBox values, or renderer implementation files.3001- If the source format cannot express requested geometry, report the limitation instead of patching renderer output.3002## Origin30033004TRN originates with [Michael Chu](https://www.cookingforengineers.com/) at [Cooking for Engineers](https://www.cookingforengineers.com/). Diagram.zip implements a text DSL and SVG renderer for Chu’s tabular recipe concept.30053006## Limitations30073008- The source selects one layout; the SVG does not embed an interactive layout toggle.3009- Combined and individual operation labels do not wrap. Long operation text can overflow.3010- TRN does not expose a source control for custom column packing.30113012## Related pages30133014- [Style TRN](/style/types/trn)3015- [General presentation settings](/style/presentation)3016- [Open TRN in the editor](https://diagram.zip/?type=trn)30173018## Upstream reference30193020[TRN documentation](https://www.cookingforengineers.com/2004/08/recipe-summaries-standards-and.html)30213022---3023id: style-trn3024slug: /style/types/trn3025title: TRN3026description: Style a TRN diagram in diagram.zip.3027sidebar_label: TRN3028---30293030# Style TRN30313032TRN colors complete relationship zones as branches. Adjacent zones receive different normalized colors, while ingredients run downward and operations run right.30333034Start with the [general presentation settings](/style/presentation). Edit shared or raw presentation in Details, and keep renderer-specific styling in Source.30353036## Source controls30373038- Use `.layout combined` for one merged table.3039- Use `.layout individual` for dependency-positioned recipe tables.3040- Combined layout places prerequisite outcomes before direct ingredients and preserves source order within each FIFO group.3041- Place each `+` immediately before the operation that consumes it.3042- Independent branches can reuse a visual column when their inputs do not depend on each other.3043- Order consecutive `->` lines as operations should proceed from left to right.3044- Use outcomes for meaningful reusable or final results; keep incidental conversions inside the consuming outcome.3045- Use concise, complete instructions because combined and individual operation text is vertical.3046- Full-width `instruction` rows wrap automatically; combined and individual operation labels remain single-line.3047## Limitations30483049- The source selects one layout; the SVG does not embed an interactive layout toggle.3050- Combined and individual operation labels do not wrap. Long operation text can overflow.3051- TRN does not expose a source control for custom column packing.30523053## Related pages30543055- [Create a TRN diagram](/create/types/trn)3056- [General presentation settings](/style/presentation)3057- [SVG normalization and version contracts](/style/svg-normalization)3058- [Open TRN in the editor](https://diagram.zip/?type=trn)30593060---30613062---3063id: create-umlet3064slug: /create/types/umlet3065title: UMLet3066description: Create an UMLet diagram in diagram.zip.3067sidebar_label: UMLet3068---30693070# UMLet30713072UMLet renders UML elements from a UXF XML document.30733074## Use this type30753076Use UMLet when UMLet is the source editor for the diagram.30773078## Source format30793080The source format is **UMLet UXF XML**. Enter the source in the diagram.zip editor.30813082## Syntax essentials30833084- Use a `diagram` root element.3085- Put each diagram item in a `element` block.3086- Use `coordinates` to set position and size.3087- Use `panel_attributes` for labels and element settings.30883089### Source structure30903091This source shows the document structure. It is not a complete document.30923093```xml3094<diagram program="umlet">3095 <element>3096 <id>UMLClass</id>3097 <coordinates><x>20</x><y>20</y><w>160</w><h>80</h></coordinates>3098 <panel_attributes>User</panel_attributes>3099 </element>3100</diagram>3101```31023103## Related pages31043105- [Style UMLet](/style/types/umlet)3106- [General presentation settings](/style/presentation)3107- [Open UMLet in the editor](https://diagram.zip/?type=umlet)31083109## Upstream reference31103111[UMLet documentation](https://www.umlet.com/)31123113---3114id: style-umlet3115slug: /style/types/umlet3116title: UMLet3117description: Style a UMLet diagram in diagram.zip.3118sidebar_label: UMLet3119---31203121# Style UMLet31223123UMLet stores position and style commands in the UXF XML source.31243125Start with the [general presentation settings](/style/presentation). Edit shared or raw presentation in Details, and keep renderer-specific styling in Source.31263127## Source controls31283129- Use the UMLet editor to change element geometry safely.3130- Put supported style commands in `panel_attributes`.3131- Use `additional_attributes` only for the selected UMLet element.3132## Related pages31333134- [Create an UMLet diagram](/create/types/umlet)3135- [General presentation settings](/style/presentation)3136- [SVG normalization and version contracts](/style/svg-normalization)3137- [Open UMLet in the editor](https://diagram.zip/?type=umlet)31383139---31403141---3142id: create-vega3143slug: /create/types/vega3144title: Vega3145description: Create a Vega diagram in diagram.zip.3146sidebar_label: Vega3147---31483149# Vega31503151Vega creates data visualizations from a declarative JSON specification.31523153## Use this type31543155Use Vega when you need detailed control of data, scales, signals, marks, and interactions.31563157## Source format31583159The source format is **Vega JSON**. Enter the source in the diagram.zip editor.31603161## Syntax essentials31623163- Use a JSON object with a Vega schema URL.3164- Put inline records in a data source.3165- Define scales and axes before marks use them.3166- Use mark encodings to map data to visual properties.31673168### Example31693170```json3171{3172 "$schema": "https://vega.github.io/schema/vega/v6.json",3173 "width": 320,3174 "height": 180,3175 "padding": 5,3176 "data": [{3177 "name": "steps",3178 "values": [3179 {"step": "Create", "count": 8},3180 {"step": "Review", "count": 5},3181 {"step": "Share", "count": 7}3182 ]3183 }],3184 "scales": [3185 {"name": "x", "type": "band", "domain": {"data": "steps", "field": "step"}, "range": "width", "padding": 0.2},3186 {"name": "y", "type": "linear", "domain": {"data": "steps", "field": "count"}, "nice": true, "zero": true, "range": "height"}3187 ],3188 "axes": [3189 {"orient": "bottom", "scale": "x"},3190 {"orient": "left", "scale": "y"}3191 ],3192 "marks": [{3193 "type": "rect",3194 "from": {"data": "steps"},3195 "encode": {"enter": {3196 "x": {"scale": "x", "field": "step"},3197 "width": {"scale": "x", "band": 1},3198 "y": {"scale": "y", "field": "count"},3199 "y2": {"scale": "y", "value": 0},3200 "fill": {"value": "#7c3aed"}3201 }}3202 }]3203}3204```32053206## Limitations32073208- URL-backed data and images are not available.3209- diagram.zip returns SVG for this type.32103211## Related pages32123213- [Style Vega](/style/types/vega)3214- [General presentation settings](/style/presentation)3215- [Open Vega in the editor](https://diagram.zip/?type=vega)32163217## Upstream reference32183219[Vega documentation](https://vega.github.io/vega/docs/)32203221---3222id: style-vega3223slug: /style/types/vega3224title: Vega3225description: Style a Vega diagram in diagram.zip.3226sidebar_label: Vega3227---32283229# Style Vega32303231Vega controls presentation through scales, mark encodings, axes, legends, and configuration.32323233Start with the [general presentation settings](/style/presentation). Edit shared or raw presentation in Details, and keep renderer-specific styling in Source.32343235## Source controls32363237- Set colors and sizes in mark encodings.3238- Use scales when a visual value depends on data.3239- Use the configuration object for common defaults.3240- Keep all data and images inline.3241## Limitations32423243- URL-backed data and images are not available.3244- diagram.zip returns SVG for this type.32453246## Related pages32473248- [Create a Vega diagram](/create/types/vega)3249- [General presentation settings](/style/presentation)3250- [SVG normalization and version contracts](/style/svg-normalization)3251- [Open Vega in the editor](https://diagram.zip/?type=vega)32523253---32543255---3256id: create-vegalite3257slug: /create/types/vegalite3258title: Vega-Lite3259description: Create a Vega-Lite diagram in diagram.zip.3260sidebar_label: Vega-Lite3261---32623263# Vega-Lite32643265Vega-Lite creates data visualizations from concise mark and encoding declarations.32663267## Use this type32683269Use Vega-Lite for common charts that do not need the full Vega grammar.32703271## Source format32723273The source format is **Vega-Lite JSON**. Enter the source in the diagram.zip editor.32743275## Syntax essentials32763277- Use a JSON object with a Vega-Lite schema URL.3278- Put inline records in `data.values`.3279- Select a mark type.3280- Map fields to channels in the `encoding` object.32813282### Example32833284```json3285{3286 "$schema": "https://vega.github.io/schema/vega-lite/v6.json",3287 "data": {"values": [{"name": "A", "value": 4}]},3288 "mark": "bar",3289 "encoding": {3290 "x": {"field": "name", "type": "nominal"},3291 "y": {"field": "value", "type": "quantitative"}3292 }3293}3294```32953296## Limitations32973298- URL-backed data and images are not available.3299- diagram.zip returns SVG for this type.33003301## Related pages33023303- [Style Vega-Lite](/style/types/vegalite)3304- [General presentation settings](/style/presentation)3305- [Open Vega-Lite in the editor](https://diagram.zip/?type=vegalite)33063307## Upstream reference33083309[Vega-Lite documentation](https://vega.github.io/vega-lite/docs/)33103311---3312id: style-vegalite3313slug: /style/types/vegalite3314title: Vega-Lite3315description: Style a Vega-Lite diagram in diagram.zip.3316sidebar_label: Vega-Lite3317---33183319# Style Vega-Lite33203321Vega-Lite controls presentation through marks, encodings, scales, axes, legends, and configuration.33223323Start with the [general presentation settings](/style/presentation). Edit shared or raw presentation in Details, and keep renderer-specific styling in Source.33243325## Source controls33263327- Set mark properties for one mark.3328- Set channel scale and axis properties in the encoding.3329- Use the configuration object for common defaults.3330- Keep all data and images inline.3331## Limitations33323333- URL-backed data and images are not available.3334- diagram.zip returns SVG for this type.33353336## Related pages33373338- [Create a Vega-Lite diagram](/create/types/vegalite)3339- [General presentation settings](/style/presentation)3340- [SVG normalization and version contracts](/style/svg-normalization)3341- [Open Vega-Lite in the editor](https://diagram.zip/?type=vegalite)33423343---33443345---3346id: create-wavedrom3347slug: /create/types/wavedrom3348title: WaveDrom3349description: Create a WaveDrom diagram in diagram.zip.3350sidebar_label: WaveDrom3351---33523353# WaveDrom33543355WaveDrom creates digital timing diagrams from signal and wave data.33563357## Use this type33583359Use WaveDrom for clocks, buses, requests, responses, and protocol timing.33603361## Source format33623363The source format is **WaveJSON**. Enter the source in the diagram.zip editor.33643365## Syntax essentials33663367- Use an object with a `signal` array.3368- Give each signal a name and a wave string.3369- Use data labels for bus values.3370- Use empty objects to add visual space.33713372### Example33733374```json3375{ "signal": [3376 { "name": "clock", "wave": "p...." },3377 { "name": "data", "wave": "x.34x", "data": ["A", "B"] }3378]}3379```33803381## Limitations33823383- Only the six bundled diagram.zip skins are available.3384- diagram.zip returns SVG for this type.33853386## Related pages33873388- [Style WaveDrom](/style/types/wavedrom)3389- [General presentation settings](/style/presentation)3390- [Open WaveDrom in the editor](https://diagram.zip/?type=wavedrom)33913392## Upstream reference33933394[WaveDrom documentation](https://wavedrom.com/tutorial.html)33953396---3397id: style-wavedrom3398slug: /style/types/wavedrom3399title: WaveDrom3400description: Style a WaveDrom diagram in diagram.zip.3401sidebar_label: WaveDrom3402---34033404# Style WaveDrom34053406WaveDrom supports source configuration, signal attributes, and a limited set of bundled skins.34073408Start with the [general presentation settings](/style/presentation). Edit shared or raw presentation in Details, and keep renderer-specific styling in Source.34093410## Source controls34113412- Use the `config` object for scale and header settings.3413- Use signal attributes for labels and wave data.3414- Select only a skin that diagram.zip provides.3415## Limitations34163417- Only the six bundled diagram.zip skins are available.3418- diagram.zip returns SVG for this type.34193420## Related pages34213422- [Create a WaveDrom diagram](/create/types/wavedrom)3423- [General presentation settings](/style/presentation)3424- [SVG normalization and version contracts](/style/svg-normalization)3425- [Open WaveDrom in the editor](https://diagram.zip/?type=wavedrom)34263427---34283429---3430id: create-wireviz3431slug: /create/types/wireviz3432title: WireViz3433description: Create a WireViz diagram in diagram.zip.3434sidebar_label: WireViz3435---34363437# WireViz34383439WireViz creates wiring-harness diagrams from connectors, cables, and connections.34403441## Use this type34423443Use WireViz to document cable assemblies, pins, wire colors, gauges, and connector mappings.34443445## Source format34463447The source format is **WireViz YAML**. Enter the source in the diagram.zip editor.34483449## Syntax essentials34503451- Declare connectors in the `connectors` map.3452- Declare cables in the `cables` map.3453- Put wiring paths in the `connections` list.3454- Use matching pin and wire lists for grouped connections.34553456### Example34573458```yaml3459connectors:3460 X1:3461 type: Molex3462 pinlabels: [GND, DATA]3463cables:3464 W1:3465 wirecount: 23466 colors: [BK, RD]3467connections:3468 - - X1: [1, 2]3469 - W1: [1, 2]3470```34713472## Related pages34733474- [Style WireViz](/style/types/wireviz)3475- [General presentation settings](/style/presentation)3476- [Open WireViz in the editor](https://diagram.zip/?type=wireviz)34773478## Upstream reference34793480[WireViz documentation](https://github.com/wireviz/WireViz)34813482---3483id: style-wireviz3484slug: /style/types/wireviz3485title: WireViz3486description: Style a WireViz diagram in diagram.zip.3487sidebar_label: WireViz3488---34893490# Style WireViz34913492WireViz uses YAML properties for connector, cable, wire, and output styles.34933494Start with the [general presentation settings](/style/presentation). Edit shared or raw presentation in Details, and keep renderer-specific styling in Source.34953496## Source controls34973498- Set connector and cable colors in their YAML definitions.3499- Use pin labels and wire colors to improve identification.3500- Use WireViz metadata and output settings only when the renderer supports them.3501## Related pages35023503- [Create a WireViz diagram](/create/types/wireviz)3504- [General presentation settings](/style/presentation)3505- [SVG normalization and version contracts](/style/svg-normalization)3506- [Open WireViz in the editor](https://diagram.zip/?type=wireviz)