Skip to main content

Custom Nodes

Use the Custom function to create nodes with your own icons from URLs, local files, or data URLs.

From Remote URL​

import { Diagram, Custom } from "diagrams-js";

const diagram = Diagram("Custom Icons");

const service = diagram.add(Custom("My Service", "https://example.com/icon.png"));

From Data URL​

const iconData = "data:image/png;base64,iVBORw0KGgo...";
const node = diagram.add(Custom("Embedded", iconData));

With Clusters​

const cluster = diagram.cluster("External Services");

const openstack = cluster.add(Custom("OpenStack", "https://example.com/openstack.png"));

const elastic = cluster.add(Custom("Elastic", "https://example.com/elastic.png"));

openstack.to(elastic);

Supported Formats​

  • PNG
  • JPEG/JPG
  • GIF
  • SVG
  • WebP

Notes​

  • In browsers: Icons are fetched from URLs
  • In Node.js: Icons can be loaded from local files or URLs
  • Icons are automatically converted to data URLs for embedding