This is the abridged developer documentation for Fluxygram # Fluxygram > Describe anything in JSON. Fluxygram draws it and tells it step by step, with motion that helps people understand. ## What you can do [Section titled “What you can do”](#what-you-can-do) Write it or draw it Write a `.flux.json` by hand, ask an AI agent to write it, or build it visually in the [editor](https://fluxygram.app/play). The layout is automatic. Seven diagram types Flows, architectures, timelines, trees, cycles, sequences and mind maps. Each one moves in the way that explains it best. Tell a story Steps reveal the diagram one idea at a time: what appears, what travels, what succeeds and what fails. Embed it anywhere One web component, ``, in any site, docs or app. No framework needed. Present it live Full screen for the audience, your notes and a timer in a second window. Let your agent do it A skill teaches Claude, ChatGPT, Gemini, Cursor and other agents to write great diagrams. ## Start here [Section titled “Start here”](#start-here) [Quickstart ](/start/quickstart/)Your first animated diagram in two minutes. [Diagram types ](/diagrams/types/)Which type to use, and how each one moves. [Steps ](/diagrams/steps/)Turn a diagram into a story. [For agents ](/guides/agents/)Give the skill to your AI agent. # Motion and states > Entrances, what travels along connections, speed, camera, states and the finale. The default motion works well. Change it to match the tone of what you are explaining: calm for a class, quick for a landing page, whiteboard-style for a walkthrough. ```json "motion": { "enter": "draw", "travel": "pulse", "speed": "slow", "camera": "follow" } ``` | Field | Values | Use it when | | -------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------- | | `enter` | `fade` (default), `scale`, `draw`, `slide` | `draw` for whiteboard-style explanations, `scale` for playful or product content, `slide` for pipelines that move one way | | `travel` | `particle` (default), `pulse`, `dash`, `packets` | `pulse` for signals or energy, `dash` for continuous streams (logs, events), `packets` for data in batches | | `speed` | `slow`, `normal` (default), `fast` | `slow` for teaching or dense diagrams, `fast` for short loops | | `camera` | `follow` (default), `fixed` | `fixed` when the whole picture should stay in view | | `hold` | seconds, 0.5 to 60 | How long each step stays on screen. Leave it out and each step is timed by its content. | | `finale` | `true` (default), `false` | See [the finale](#the-finale). | `speed` changes how fast things move. `hold` and a step’s `duration` change how long each step waits. ## Overrides [Section titled “Overrides”](#overrides) A block can set its own `enter` and a connection its own `travel`. Use it to make one thing stand apart, not on every element: ```json { "id": "done", "label": "Delivered", "enter": "scale" } { "id": "logs", "from": "api", "to": "logs", "travel": "dash" } ``` ## What travels: `carries` [Section titled “What travels: carries”](#what-travels-carries) `carries` names what moves along a connection, shown riding with the particle: `"token"`, `"$"`, `"order"`, `"event"`. Use it on the main path so viewers see *what* moves, not just that something moves. ```json { "id": "e2", "from": "gateway", "to": "bank", "carries": "token" } ``` ## States [Section titled “States”](#states) States show outcomes on the diagram itself. Set them on blocks or connections, from the start (`"state"` on the element) or from a step on (`"state"` in the step). | State | Looks like | | --------- | ------------------------------------ | | `success` | Green, with a check | | `error` | Red; the block shakes once | | `warning` | Amber; the badge blinks | | `pending` | In progress: the dashed border spins | | `default` | Back to normal | On a connection, the state colors the line, its particle and its label, so a failing path reads red at a glance. A typical pattern: `pending` while something is processed, then `success` or `error` in the next step. ## The finale [Section titled “The finale”](#the-finale) After the last step, Fluxygram adds a finale: the camera zooms out to the whole diagram and particles run along every visible connection. Turn it off with `"motion": { "finale": false }` when the last step must stay framed on a detail. ## Reduced motion [Section titled “Reduced motion”](#reduced-motion) When someone has “reduce motion” turned on in their system, diagrams still tell the story step by step, without the travel and camera movement. # Steps > Turn a diagram into a story, one idea at a time. Without steps, a diagram plays its type’s default motion. With `steps`, **you** decide what the viewer sees and in what order. That’s what turns a picture into an explanation. Steps are **cumulative**: whatever appears stays visible until a later step hides it. ```json "steps": [ { "show": ["shop"], "caption": "The customer pays at checkout" }, { "show": ["e1"], "flow": "e1", "caption": "The card never touches your server" }, { "show": ["e2"], "flow": "e2", "state": { "bank": "pending" }, "caption": "The gateway asks the bank" }, { "show": ["yes"], "flow": "yes", "state": { "bank": "success" }, "highlight": ["done"], "caption": "Approved: the order is confirmed" } ] ``` ## What a step can do [Section titled “What a step can do”](#what-a-step-can-do) | Field | Effect | | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | | `show` | Elements that appear. Showing a connection also shows its two blocks. | | `flow` | A connection id (or a list): something travels along it while the step is active. Also shows it. | | `highlight` | Blocks that stand out; everything else dims. Good for following one path through a busy diagram. | | `focus` | The camera moves in on one block or group. Good for a detail, usually near the end. | | `state` | States from this step on, for blocks **and** connections: `{ "bank": "pending", "declined": "error" }`. See [States](/diagrams/motion/#states). | | `hide` | Elements that disappear. Rarely needed. | | `caption` | The sentence shown under the diagram. | | `duration` | Seconds this step stays on screen in autoplay. | | `notes` | Speaker notes, only visible in the presenter view. See [Present it live](/guides/present/). | Connections are referenced by their `id`. If a connection has no `id`, its id is `"from->to"`, for example `"shop->gateway"`. ## A complete example [Section titled “A complete example”](#a-complete-example) This diagram uses `flow`, `state` on blocks and connections, `highlight`, `focus` and captions: ## Writing good steps [Section titled “Writing good steps”](#writing-good-steps) 1. **One idea per step.** If a caption needs “and”, it’s probably two steps. 2. **At most \~5 new elements per step.** A step that shows everything at once explains nothing. 3. **Captions under 12 words**, saying what *happens* (“The gateway asks the bank”), not what the box is (“Payment gateway”). 4. **Follow the reading order.** Show a block before the connection that leaves it. 5. **Use `flow` for something real moving**: a request, money, data, a message. Name it with `carries` on the connection. 6. **Use `state` for outcomes.** Show approved or declined on the block instead of describing it. Not everything is green: mark a failing path `error`. 7. **End on the outcome**: highlight or focus the result. 8. **5 to 8 steps** is the sweet spot. Under 3 feels static; over 10 feels slow. After the last step, Fluxygram adds a [finale](/diagrams/motion/#the-finale): the camera pulls back to show everything at once. ## Timing [Section titled “Timing”](#timing) In autoplay, each step waits long enough to read it: Fluxygram measures how much enters and how long the caption is. Change it for the whole diagram with [`motion.hold`](/diagrams/motion/), or for one step with `duration`: ```json { "show": ["done"], "caption": "The key outcome, with a longer explanation", "duration": 6 } ``` # Diagram types > The seven diagram types, what each one explains and how it moves. Set the type with `"type"`. Each type has its own layout and its own default motion, used whenever the diagram has no steps. | You want to explain… | Type | Default motion | | ------------------------------------------ | -------------- | --------------------------------------------------------------------------- | | Steps, a process, decisions, a pipeline | `flow` | The path builds column by column; a particle runs along each new connection | | A system: services, layers, who calls whom | `architecture` | Layers appear bottom-up, then requests flow through every connection | | History, a roadmap, releases | `timeline` | The camera moves from milestone to milestone | | Who talks to whom, in order | `sequence` | Participants appear, then each message crosses between lifelines | | A process that repeats | `cycle` | Each stage appears around the ring; at the end everything loops | | A hierarchy | `tree` | Grows from the root, level by level | | Ideas around one topic | `mindmap` | The central idea first, then one branch at a time | When two types fit, pick the one whose motion matches the question: “how does X happen” → `flow`; “how is X built” → `architecture`; “how did X change” → `timeline`; “who sends what to whom” → `sequence`; “what keeps repeating” → `cycle`; “how is X organized” → `tree`; “what does X involve” → `mindmap`. ## flow [Section titled “flow”](#flow) Processes and decisions. Blocks can take shapes with `kind`: `decision` (diamond, phrase it as a question), `start` and `end` (pills), `data` (parallelogram), `database` (cylinder) and `note`. Add `"direction": "TB"` to lay it out top to bottom. ## architecture [Section titled “architecture”](#architecture) Systems in layers. List the `groups` **top to bottom** (what the user touches first goes on top, storage at the bottom) and give every node a `group`. ```json "groups": [ { "id": "clients", "label": "Clients" }, { "id": "services", "label": "Services" }, { "id": "data", "label": "Data" } ], "nodes": [ { "id": "web", "label": "Web app", "group": "clients", "icon": "browser" }, { "id": "api", "label": "API", "group": "services", "icon": "api" }, { "id": "db", "label": "Postgres", "group": "data", "kind": "database" } ] ``` ## timeline [Section titled “timeline”](#timeline) Milestones in order. Give each node a `date` (`"1995"`, `"2026-03"`, `"Q3 2026"`); when every node has one, they are sorted by it. No connections needed. ## sequence [Section titled “sequence”](#sequence) Who talks to whom, in order. Nodes are the participants, left to right. **Connections are the messages, in the order they happen**: the list of edges is the timeline. Give each message a short `label`. ## cycle [Section titled “cycle”](#cycle) A process that repeats. List the nodes in the order of the cycle, connect each one to the next, and the last one back to the first. ## tree [Section titled “tree”](#tree) A hierarchy. Connect each parent to its children; the root is the node nothing points to. ## mindmap [Section titled “mindmap”](#mindmap) Ideas around one topic. The first node is the central idea; connect it to the branches, and each branch to its sub-ideas. # For AI agents > Give the Fluxygram skill to Claude, ChatGPT, Gemini, Cursor and other agents. The Fluxygram **skill** teaches an AI agent the format, how to choose the diagram type and how to write steps that explain. With it, you can say “make an animated diagram of how OAuth works” and get a valid `.flux.json`. * Claude Code The repository is a plugin marketplace: ```plaintext /plugin marketplace add Fluxygram/fluxygram /plugin install fluxygram@fluxygram ``` Then just ask: *“Make an animated diagram of how our checkout works.”* * Cursor · Codex · Copilot Save the skill in your project and point the agent at it (or add it to your rules): ```bash curl -o FLUXYGRAM.md https://fluxygram.app/skill.md ``` Then ask: *“Following FLUXYGRAM.md, diagram how a request goes through our API.”* * ChatGPT · Gemini · Claude.ai On the [Fluxygram site](https://fluxygram.app/#agents), pick your assistant, type what you want to explain and press **Copy prompt**. The prompt includes the whole skill. Paste it in the chat, then paste the JSON answer into the [editor](https://fluxygram.app/play). ## What the agent learns [Section titled “What the agent learns”](#what-the-agent-learns) * Which of the seven [types](/diagrams/types/) fits the question. * The format: blocks, connections, groups, icons, states. * The storytelling rules: one idea per step, short captions, `flow` for real movement, `state` for outcomes. * A recipe to [diagram a whole codebase](/guides/codebase/). The full skill is at [`skills/fluxygram/SKILL.md`](https://github.com/Fluxygram/fluxygram/blob/main/skills/fluxygram/SKILL.md), and also served at [fluxygram.app/skill.md](https://fluxygram.app/skill.md). ## These docs, for agents [Section titled “These docs, for agents”](#these-docs-for-agents) These docs are also published as plain text for language models: * [`/llms.txt`](/llms.txt): a short overview that links to the two versions below. * [`/llms-full.txt`](/llms-full.txt): all the documentation in one file. * [`/llms-small.txt`](/llms-small.txt): a shorter version, for small context windows. # Diagram a codebase > Explain a repository with a small set of diagrams, from overview to key flows. One diagram that shows everything explains nothing. To explain a repository (a monorepo, a set of microservices, an app and its backend), read first and draw a **small set**: one overview and a few key flows. This is the recipe the [agent skill](/guides/agents/) follows; you can give it to any agent with “diagram this repo”. ## 1. Read the system, not the files [Section titled “1. Read the system, not the files”](#1-read-the-system-not-the-files) Look where the architecture is declared, in this order: 1. **Deployment**: `docker-compose*.yml`, Kubernetes or Helm manifests, `serverless.yml`, `wrangler.*`, Terraform, `Procfile`. Every service, database, queue and cache usually appears here. 2. **Workspaces**: `package.json` workspaces, `pnpm-workspace.yaml`, `go.work`, `Cargo.toml`, top-level `apps/` and `services/`. One package or app is usually one block. 3. **Entry points and routes**: `main.*`, `server.*`, routers, controllers, OpenAPI, GraphQL or `.proto` files. 4. **Who calls whom**: HTTP clients and base URLs (`ORDERS_URL`), gRPC stubs, queue producers and consumers, database clients, third-party SDKs. 5. **The README**, last, to confirm names and intent. ## 2. Draw a set [Section titled “2. Draw a set”](#2-draw-a-set) 1. **Overview** (`architecture`): layers top to bottom, for example Clients → Edge → Services → Data → External. One block per deployable service or data store, 15 at most. 2. **Two to four key flows** (`sequence`): the requests that matter most (sign-up, checkout, the main job). Messages in order, labelled with the endpoint or event (`POST /orders`, `order.created`). 3. **Optional**: a `flow` for a business process, or a `tree` of the packages if the question is about code organization. Name each file after what it explains: `overview.flux.json`, `checkout.flux.json`. ## 3. Rules [Section titled “3. Rules”](#3-rules) * Use the names the team uses in code, with a plain `description` of the job (“charges cards”). * Show the main path with `flow` and `carries` (`"carries": "order.created"`), not every call. * Leave out what you can’t confirm from the code instead of guessing. * For onboarding, write `notes` on each step: retries, idempotency, which folder holds it. Then [present it](/guides/present/). # Present it live > Explain a diagram to an audience, step by step, with your notes in a second window. Presentation mode turns any diagram into a live talk: the audience sees the diagram full screen and you advance it one step at a time while you speak. 1. Write **speaker notes** for each step: in the editor, select a step and fill in *Speaker notes*, or add `"notes"` to the step in the JSON. They’re never shown in the diagram. ```json { "show": ["e2"], "flow": "e2", "caption": "The gateway asks the bank", "notes": "Mention that this call usually takes under 300 ms." } ``` 2. Press **Present** in the editor (or in a shared diagram’s viewer). A window opens for the audience. 3. Press `N` to open **your notes** in a second window, and drag it to your laptop screen. Press `F` for full screen on the projector. ## Controls [Section titled “Controls”](#controls) | Key | Action | | ----------------- | ------------------- | | `→` `Space` click | Next step | | `←` | Previous step | | `Home` / `End` | First / last step | | `N` | Open your notes | | `F` | Full screen | | `?` | Show the help again | Wireless presenters (clickers) work too: they send Page Down and Page Up. ## Your notes window [Section titled “Your notes window”](#your-notes-window) The presenter window shows the **notes** for the current step in large type, what the audience is reading **now**, what comes **next**, a small preview of the diagram and a **timer**. It has its own Previous and Next buttons. The two windows stay in sync: you can advance from either one. ## The closing screen [Section titled “The closing screen”](#the-closing-screen) After the last step, advancing once more shows the audience a closing screen with “Thank you” and the diagram’s title. Press `←` to go back to the diagram. # The component > Attributes, properties, methods, events and gestures of the web component. `` draws a diagram and tells it step by step. It’s a standard custom element with its own Shadow DOM: your page styles don’t leak into it. ```html ``` ## Attributes [Section titled “Attributes”](#attributes) | Attribute | Values | Default | | ---------- | --------------------------------------------------------- | ------------------------------------ | | `src` | URL of a `.flux.json` file | — | | `autoplay` | `"false"` to start paused | plays when it scrolls into view | | `controls` | `"false"` to hide the step bar | shown | | `theme` | `dark` or `light` | `dark` | | `lang` | `en` or `es` | the page’s or the browser’s language | | `gestures` | `"full"` when the diagram is the main content of the page | — | | `present` | Presentation mode styling (used by the presentation page) | — | ## Property [Section titled “Property”](#property) | Property | Type | | --------- | ----------------------------------------------------------------------- | | `diagram` | Diagram object or JSON string. Setting it replaces the current diagram. | ## Methods [Section titled “Methods”](#methods) | Method | Does | | ---------- | ------------------------------ | | `next()` | Next step | | `prev()` | Previous step | | `goTo(i)` | Jump to step `i` (zero-based) | | `play()` | Start autoplay | | `pause()` | Pause autoplay | | `replay()` | Start over from the first step | ## Event [Section titled “Event”](#event) `fluxy-step` fires every time the step changes: ```js el.addEventListener('fluxy-step', (e) => { const { index, count } = e.detail; console.log(`Step ${index + 1} of ${count}`); }); ``` ## Interaction [Section titled “Interaction”](#interaction) * **Drag** to pan; **click a block** to zoom in on it; **hover** to highlight its connections. The *back to the step view* button (or `Esc`) resets the camera. * **Zoom**: on a page, `Ctrl` + scroll (`⌘` + scroll on Mac) or a trackpad pinch, so the page keeps scrolling normally. With `gestures="full"`, the scroll wheel zooms directly and touch pans and pinches. * **Keyboard**: `←` and `→` change steps when the diagram has focus. * Any interaction pauses autoplay. ## Sizing and styling [Section titled “Sizing and styling”](#sizing-and-styling) The component is as wide as its container and keeps the diagram’s proportions. Give the container a width: ```css fluxy-gram { max-width: 900px; margin-inline: auto; } ``` # Format reference > Every field of a .flux.json file, generated from the JSON Schema. A `.flux.json` file is validated against the [JSON Schema](https://fluxygram.app/schema/v1.json). Add it at the top of your file to get autocomplete and inline errors in your editor: ```json { "$schema": "https://fluxygram.app/schema/v1.json", "type": "flow", "nodes": [] } ``` The tables below are generated from that schema, so they always match what Fluxygram accepts. ## Diagram [Section titled “Diagram”](#diagram) | Field | Type or values | Description | | ---------------- | -------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- | | `type` required | `flow` · `architecture` · `timeline` · `tree` · `cycle` · `sequence` · `mindmap` | Diagram type. Each one has its own default motion. | | `title` | string | Shown above the diagram. Say what it shows. | | `theme` | `dark` · `light` | | | `direction` | `LR` · `TB` | Layout direction for flow diagrams. | | `nodes` required | node\[] | | | `edges` | edge\[] | | | `groups` | group\[] | Layers for architecture diagrams, listed top to bottom. | | `steps` | step\[] | Optional story. Steps are cumulative. Without steps, the type's default motion is used. | | `finale` | boolean | After the last step the camera zooms out and every visible connection flows at once. Set false to end on the last step. | | `motion` | object | Default animation for the whole diagram. Blocks and connections can override enter / travel. | ## Nodes (blocks) [Section titled “Nodes (blocks)”](#nodes-blocks) | Field | Type or values | Description | | ---------------- | ----------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `id` required | id | | | `label` required | string | Short name, ideally 1 to 3 words. | | `description` | string | One short line under the name. | | `icon` | 175 names | Built-in icon name. | | `kind` | `default` · `decision` · `start` · `end` · `data` · `database` · `note` | Block shape. decision: diamond (phrase it as a question). start/end: pill. data: parallelogram (input/output). database: cylinder. note: folded note for annotations. | | `group` | id | architecture only: the layer this node belongs to. | | `date` | string | timeline only, for example "1995" or "2026-03". | | `accent` | boolean | Highlight this node with the accent color. | | `x` | number | Manually pinned position (top-left), set by the visual editor. Omit it to let Fluxygram place the node. | | `y` | number | Manually pinned position (top-left). Use together with x. | | `enter` | `fade` · `scale` · `draw` · `slide` | How a block enters. fade: fades up (default). scale: grows with a slight bounce. draw: its outline is traced, then fill and text appear. slide: slides in. | | `state` | `success` · `error` · `warning` · `pending` · `default` | State from the start (steps can change it). success: green + check. error: red, shakes. warning: amber, badge blinks. pending: in progress, dashed border spins. | `id` is unique across nodes, connections and groups: letters, digits, `-` and `_`. See every icon in the [icon list](/reference/icons/). ## Edges (connections) [Section titled “Edges (connections)”](#edges-connections) | Field | Type or values | Description | | --------------- | ------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `id` | id | Needed to reference the edge from steps. Defaults to "from->to". | | `from` required | id | | | `to` required | id | | | `label` | string | | | `carries` | string | What travels along the edge. Shown next to the particle ("token", "$", "event"). 1 or 2 words. | | `travel` | `particle` · `pulse` · `dash` · `packets` | What travels along a connection when it flows. particle: comet dot (default). pulse: a stretch of light. dash: dashes marching continuously. packets: small spaced blocks. | | `state` | `success` · `error` · `warning` · `pending` · `default` | State from the start. Colors the line, the particle and the label (e.g. a path that fails). | A connection without `id` gets `"from->to"` as its id. ## Groups [Section titled “Groups”](#groups) | Field | Type or values | Description | | ---------------- | -------------- | ----------- | | `id` required | id | | | `label` required | string | | ## Steps [Section titled “Steps”](#steps) | Field | Type or values | Description | | ----------- | --------------- | -------------------------------------------------------------------------------------------------------------- | | `show` | id\[] | Elements that appear. Showing an edge also shows its two nodes. | | `hide` | id\[] | | | `focus` | id | The camera moves in on this node or group. | | `flow` | id | Edges a particle travels along while the step is active. | | `highlight` | id | Elements that stand out; the rest dims. | | `caption` | string | Text for the step. Keep it under 12 words. | | `state` | object | Changes node or connection states from this step on: { "pay": "success", "e3": "error" }. "default" clears it. | | `duration` | number (0.5–60) | Seconds this step stays on screen during autoplay (overrides motion.hold). | | `notes` | string | Speaker notes for this step. Shown only in the presenter view (/present), never in the diagram. | ## Motion [Section titled “Motion”](#motion) | Field | Type or values | Description | | -------- | ----------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `enter` | `fade` · `scale` · `draw` · `slide` | How a block enters. fade: fades up (default). scale: grows with a slight bounce. draw: its outline is traced, then fill and text appear. slide: slides in. | | `travel` | `particle` · `pulse` · `dash` · `packets` | What travels along a connection when it flows. particle: comet dot (default). pulse: a stretch of light. dash: dashes marching continuously. packets: small spaced blocks. | | `speed` | `slow` · `normal` · `fast` | | | `camera` | `follow` · `fixed` | follow: the camera follows the action. fixed: everything always in view. | | `finale` | boolean | | | `hold` | number (0.5–60) | Seconds each step stays on screen during autoplay. Omit it to let Fluxygram time each step by its content. | ## Errors [Section titled “Errors”](#errors) Fluxygram validates every file and explains problems in plain language, in English or Spanish, with the path to the field: ```plaintext edges[2].to: "to" points to "x", which is not a node. steps[1].flow: "e9" is not the id of any node, edge or group. ``` The same validation is available in code through [`@fluxygram/core`](/start/install/#packages). # Icons > Every built-in icon, by category, with the name to use. Set an icon on any block with its exact name: `{ "id": "db", "label": "Orders", "icon": "database" }`. Icons are drawn from [Lucide](https://lucide.dev). ### general * `check` * `alert` * `info` * `help` * `flag` * `star` * `heart` * `bookmark` * `tag` * `pin` * `home` * `search` * `settings` * `filter` * `clock` * `calendar` * `idea` * `target` * `trophy` * `rocket` * `zap` * `layers` * `workflow` * `puzzle` * `box` ### people * `user` * `users` * `verified` * `signup` * `admin` * `bot` * `contact` * `deal` * `building` * `school` * `hospital` * `student` * `work` * `brain` ### devices * `browser` * `mobile` * `tablet` * `monitor` * `laptop` * `watch` * `printer` * `camera` * `mic` * `speaker` * `keyboard` * `gamepad` * `tv` * `router` * `wifi` * `bluetooth` * `cpu` * `disk` * `usb` ### infrastructure * `server` * `cloud` * `database` * `network` * `globe` * `cdn` * `container` * `api` * `plug` * `cable` * `gauge` * `activity` * `queue` * `balancer` * `function` * `storage` * `backup` * `sync` * `upload` * `download` * `logs` * `dashboard` ### code * `code` * `terminal` * `braces` * `bug` * `git` * `merge` * `pullrequest` * `package` * `tool` * `build` * `design` * `pen` ### data * `file` * `files` * `folder` * `image` * `video` * `music` * `table` * `sheet` * `chart` * `bars` * `pie` * `book` * `notebook` * `clipboard` * `inbox` ### commerce * `cart` * `card` * `wallet` * `money` * `coins` * `receipt` * `store` * `truck` * `gift` * `percent` * `bank` * `barcode` * `scan` * `scale` ### communication * `mail` * `message` * `chat` * `phone` * `notification` * `send` * `share` * `megaphone` * `rss` * `at` * `link` ### security * `shield` * `lock` * `unlock` * `key` * `fingerprint` * `eye` * `hidden` * `secure` * `threat` * `id` ### world * `sun` * `moon` * `leaf` * `tree` * `water` * `fire` * `mountain` * `map` * `plane` * `car` * `train` * `ship` * `factory` * `warehouse` * `health` * `pill` * `fitness` * `food` * `coffee` ### status * `play` * `pause` * `timer` * `hourglass` * `loading` * `error` * `add` * `remove` * `next` * `join` * `repeat` * `random` * `up` * `down` # The editor > Build, preview, share and export diagrams visually. The [editor](https://fluxygram.app/play) runs entirely in your browser. Nothing is uploaded: your diagram is saved locally and shared links carry the whole diagram inside the URL. ## Build a diagram [Section titled “Build a diagram”](#build-a-diagram) 1. **Pick a type** in the selector at the top left, next to the logo (Flow, Architecture, Timeline…). You can change it at any time without losing your blocks and connections, and undo the change. 2. **Add blocks** by dragging them from the palette onto the canvas. The palette shows the blocks that make sense for the current type: decisions and databases in a flow, layers in an architecture, participants in a sequence. 3. **Connect them**: drag from a block’s dot to another block. 4. **Edit** anything in the **Properties** panel on the right: label, description, icon, shape, state. Select a connection to give it a label or say what it `carries`. Dragging a block pins it to that position (`x` and `y` in the JSON). Everything else keeps its automatic layout. **Auto layout** removes the pins. ## Write the story [Section titled “Write the story”](#write-the-story) The **Steps** bar at the bottom holds the story. Add a step with **+**, then click blocks and connections on the canvas. What a click does depends on the mode you pick for that step: | Mode | A click on the canvas… | | ---------- | ------------------------------------------- | | Appears | makes the element appear in this step | | Particle | sends a particle along the connection | | Stands out | highlights the block and dims the rest | | Camera | moves the camera in on the block | | State | sets success, error, warning or in progress | Select a step to write its **caption** (what the audience reads), its **duration** and your **speaker notes** in the Properties panel. ## The JSON tab [Section titled “The JSON tab”](#the-json-tab) The **JSON** tab shows the same diagram as code, with colors, line numbers and errors marked on their line. Changes apply as you type when the JSON is valid. **Format** tidies it and **Copy** puts it on your clipboard. ## Share and export [Section titled “Share and export”](#share-and-export) | Button | What you get | | ----------------- | ---------------------------------------------------------------------------------------------------------------- | | **Share** | A link that opens the diagram in a viewer. The diagram travels compressed inside the URL: no account, no server. | | **Download JSON** | The `.flux.json` file. | | **Export HTML** | A single self-contained HTML file that plays the diagram offline. | | **Present** | [Presentation mode](/guides/present/): full screen plus your notes. | You can also **open** or **drop** a `.flux.json` on the canvas to edit it. To start over, the **New** button (page with a plus sign) lets you pick an empty diagram of any type or start from one of the examples. # Install > Add the component to a site, docs or app. `` is a standard web component. It works in plain HTML and in every framework (React, Vue, Svelte, Astro, Angular…), with no wrapper. * CDN No install, no bundler: ```html ``` * npm ```bash npm install @fluxygram/element ``` ```js // Registers once, anywhere in your app. import '@fluxygram/element'; ``` ## Load a diagram [Section titled “Load a diagram”](#load-a-diagram) Point `src` at a `.flux.json` file: ```html ``` Or write it inline: ```html ``` Or set it from JavaScript: ```js document.querySelector('fluxy-gram').diagram = { type: 'flow', nodes: [/* … */], edges: [/* … */] }; ``` ## In a framework [Section titled “In a framework”](#in-a-framework) ```jsx // React import '@fluxygram/element'; export function Checkout() { return ; } ``` ```vue ``` ## Packages [Section titled “Packages”](#packages) | Package | What it is | | ------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------- | | [`@fluxygram/element`](https://www.npmjs.com/package/@fluxygram/element) | The `` component. Use it with a bundler. | | [`fluxygram`](https://www.npmjs.com/package/fluxygram) | The same component as a single file, for ` ``` * npm ```bash npm install @fluxygram/element ``` ```js import '@fluxygram/element'; ``` ## Next [Section titled “Next”](#next) * [Diagram types](/diagrams/types/): which one fits what you want to explain. * [The editor](/start/editor/): build diagrams visually, share them, export them. * [Motion](/diagrams/motion/): entrances, what travels along connections, states, speed.