Overview

FlowCraft is a drag-and-drop canvas editor block for OutSystems 11 Reactive Web apps. Use it to build flows, diagrams, resumes, UI mock-ups and mind maps, then save them as JSON or export them as PNG.

• Add cards, text, 14 shapes, images and your own HTML
• Drag, resize, scale and rotate elements, with snapping guidelines
• Multi-select with Shift+click or a drag box
• Animated arrow connections that follow elements as they move
• Layers panel, bring forward and send backward
• Text formatting: font family, size, colour, bold, italic, alignment
• Undo and redo, up to 100 steps
• Save and restore the canvas as JSON
• High-resolution PNG export
• Theming through CSS variables

Requirements

FlowCraft needs OutSystems 11 Reactive Web, OutSystems UI (for its InlineSVG block) and a desktop browser. The canvas is at least 1200px wide and scrolls inside its container on smaller screens.

These libraries are bundled with the component, so there is nothing else to install:

Getting started

Add the block to a screen inside a container that has a fixed height; that is the only required setup.

1. Install FlowCraft from the Forge.
2. In your app, open Manage Dependencies, select FlowCraft, tick the FlowCraft block and click Apply.
3. Drag the FlowCraft block onto a screen.
4. Place it in a container with a fixed height, for example height: 760px;. The editor fills 100% of its parent and is at least 600px tall.
5. Optional: bind InitialStateJSON to restore a saved diagram, and handle the ExportedJSON event to save it.

Block API

The block has two optional inputs and one event. The parameter name CustomeDiv is kept as-is for backward compatibility.

Saving and restoring a diagram

Save the JSON from the ExportedJSON event, then bind it to InitialStateJSON to load it again.

1. Create a screen action, for example OnCanvasExported, with an input parameter JSON (Text).
2. Set it as the handler of the block's ExportedJSON event.
3. In the action, save JSON to an entity attribute (Text, unlimited length) or a local variable.
4. Bind InitialStateJSON to the saved value, for example GetDiagram.List.Current.Diagram.StateJSON.

InitialStateJSON only re-applies when its value changes. To reload identical JSON, add a toggled trailing space:

CanvasJSON = SavedJSON + If(ReloadToggle, " ", "")
ReloadToggle = not ReloadToggle

JSON format

{
  "elements": [
    {
      "id": "1",
      "html": "<div class=\"editable\">Editable Text</div>",
      "left": "100px",
      "top": "100px",
      "width": "280px",
      "height": "240px",
      "transform": "rotate(15deg)",
      "zIndex": "2"
    }
  ],
  "connections": [
    { "from": "1", "to": "2" }
  ]
}

• id must be unique. If a duplicate is found when loading, the first element keeps the ID and later ones get new IDs.
• connections link elements by id. Connections to missing elements are ignored.
• A missing elements or connections key is treated as an empty list.
• Images uploaded from the user's computer are stored inside html as Base64 data, so the JSON can get large. Use an unlimited-length Text attribute.

Using the editor

Every toolbar control shows its name on hover. Text formatting applies to the text currently being edited; size and layer actions apply to the selection.

Toolbar

Canvas interactions

Keyboard shortcuts

Shortcuts are ignored while typing in inputs, text areas, dropdowns or text being edited.

Theming

All FlowCraft styles are scoped to .flowcraft-root and don't affect the rest of your app. Override these CSS variables in your theme to change its look.

.my-editor .flowcraft-root {
  --fc-accent: #e11d48;
  --fc-accent-2: #7f1d1d;
  --fc-wrapper-bg: linear-gradient(180deg, #1a1a22, #0f0f14);
}

Security

HTML from CustomeDiv and from imported JSON is sanitised before it reaches the canvas.

• <script>, <iframe>, <object>, <embed>, <link>, <meta> and <base> tags are removed.
• All on* attributes and javascript: URLs are removed; image URLs starting with javascript: are rejected.
• Treat saved JSON as user content: store it per user or per diagram, and check access on the server before returning it.

Limitations

• One editor per screen. FlowCraft uses a single shared editor instance.
• External images in PNG export. Images from servers without cross-origin (CORS) access are left out of the PNG; uploaded and CORS-enabled images export correctly.
• Placeholder images. Default card and image elements load from picsum.photos; replace them if users have no internet access.
• Desktop-oriented. Designed for mouse and keyboard.

Troubleshooting

Demo

The FlowCraftDemo app shows every feature:

• a live editor loaded with a sample diagram
• a State Console that captures ExportedJSON, lets you edit the JSON and loads it back through InitialStateJSON
• an invalid-JSON example showing the canvas stays intact
• a reference card for the block's inputs, event and keyboard shortcuts