Styling

FlowDiagram({
  nodes,
  edges,
  config: {
    colorMode: "dark",
    colors: { background: "#0d0f13", edgeStroke: "#4b5563" },
    background: { variant: "lines", gap: 24 },
    controls: { position: "top-left", showInteractive: false },
    minimap: { visible: false },
  },
});

import {
  type BuildContext, Container, EdgeInsets, StatelessWidget, Text, TextStyle, type Widget,
} from "flitter-core";
import { FlowDiagram, FlowProvider } from "flitter-diagram";
 
class ZoomLabelWidget extends StatelessWidget {
  build(context: BuildContext): Widget {
    const flow = FlowProvider.of(context);
    return Container({
      padding: EdgeInsets.symmetric({ horizontal: 8, vertical: 4 }),
      color: "#ffffff",
      child: Text(`${Math.round(flow.getZoom() * 100)}%`, { style: new TextStyle({ fontSize: 12 }) }),
    });
  }
}
 
function ZoomLabel(): Widget {
  return new ZoomLabelWidget();
}
 
FlowDiagram({
  nodes,
  edges,
  panels: [{ position: "top-right", child: ZoomLabel() }],
});

import { Border, BoxDecoration, Container, EdgeInsets, SizedBox, Text, TextStyle } from "flitter-core";
import {
  Flow,
  ShapePaint,
  commandsToD,
  getEdgePathByType,
  rectPathD,
  type FlowCustom,
  type HandleSpec,
} from "flitter-diagram";
 
type InkConfig = { ink: string; paper: string; accent: string };
 
const sideHandles: HandleSpec[] = [
  { type: "target", position: "left" },
  { type: "source", position: "right" },
];
 
const inkCustom: FlowCustom<InkConfig> = {
  node: ({ node, selected }, { config }) =>
    Container({
      padding: EdgeInsets.symmetric({ horizontal: 14, vertical: 8 }),
      decoration: new BoxDecoration({
        color: config.paper,
        border: Border.all({ color: selected ? config.accent : config.ink, width: 2 }),
      }),
      child: Text(String(node.data.label ?? node.id), {
        style: new TextStyle({ color: config.ink, fontSize: 13 }),
      }),
    }),
  edge: ({ path, size, selected }, { config }) =>
    ShapePaint({
      width: size.width,
      height: size.height,
      shapes: {
        line: { d: commandsToD(path.commands), stroke: selected ? config.accent : config.ink, strokeWidth: 2 },
      },
    }),
  edgeLabel: () => null,
  handle: ({ handle }, { config }) =>
    Container({ width: handle.width + 4, height: handle.height + 4, color: config.ink }),
  defaultHandles: () => sideHandles,
  connectionLine: ({ path, size }, { config }) =>
    ShapePaint({
      width: size.width,
      height: size.height,
      shapes: {
        line: { d: commandsToD(path.commands), stroke: config.accent, strokeWidth: 2, dash: [4, 4] },
      },
    }),
  background: ({ width, height }, { config }) => Container({ width, height, color: config.paper }),
  selectionBox: ({ rect }, { config }) =>
    ShapePaint({
      width: rect.width,
      height: rect.height,
      shapes: { box: { d: rectPathD(0, 0, rect.width, rect.height), stroke: config.accent, strokeWidth: 1 } },
    }),
  nodesSelectionRect: () => null,
  edgePath: ({ type, params }) => getEdgePathByType(type, params),
  // Lines are invisible 8px strips; handles are accent squares
  resizeControl: ({ variant }, { config }) =>
    variant === "line" ? SizedBox({ width: 8, height: 8 }) : Container({ width: 8, height: 8, color: config.accent }),
  reconnectHandle: ({ size }) => SizedBox({ width: size, height: size }),
};
 
export const inkDiagram = Flow<InkConfig>({
  nodes,
  edges,
  custom: inkCustom,
  config: { ink: "#1f2937", paper: "#fdfaf3", accent: "#d97706" },
  fitView: true,
});

import { Flow, XyflowControls, createXyflowConfig, xyflowCustom, type XyflowFlowConfig } from "flitter-diagram";
 
Flow<XyflowFlowConfig>({
  nodes,
  edges,
  config: createXyflowConfig({ colorMode: "dark" }),
  custom: { ...xyflowCustom, nodesSelectionRect: () => null },
  panels: [{ position: "bottom-left", child: XyflowControls() }],
});