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"));

Using Iconify​

The Iconify function provides easy access to more than 200,000 icons from the Iconify icon sets.

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

const diagram = Diagram("Iconify Example");

// Material Design icons
const home = diagram.add(Iconify("Home", "mdi:home"));
const settings = diagram.add(Iconify("Settings", "mdi:cog"));

// Technology logos
const aws = diagram.add(Iconify("AWS", "logos:aws"));
const docker = diagram.add(Iconify("Docker", "logos:docker"));

home.to(settings).to(aws).to(docker);

Browse available icons at icon-sets.iconify.design.

The Iconify function is a simple wrapper around Custom:

const Iconify = (label, iconName) => Custom(label, `https://api.iconify.design/${iconName}.svg`);

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