Skip to main content

Installation

Node.js​

Install diagrams-js using your preferred package manager:

npm install diagrams-js

Optional Dependencies​

Rendering SVG does not require any additional packages. However, for PNG and JPG rendering in Node.js, the package sharp is required:

npm install sharp

Browser Usage​

Using a Bundler​

Install via npm and import:

import { Diagram } from "diagrams-js";
import { EC2 } from "diagrams-js/aws/compute";

Using CDN​

<script type="module">
  import { Diagram } from "https://cdn.jsdelivr.net/npm/diagrams-js";
  import { EC2 } from "https://cdn.jsdelivr.net/npm/diagrams-js/providers/aws/compute";
</script>

Using CDN with Import Map​

You can use import maps to enable bare module imports while loading from a CDN:

<script type="importmap">
  {
    "imports": {
      "diagrams-js": "https://cdn.jsdelivr.net/npm/diagrams-js",
      "diagrams-js/": "https://cdn.jsdelivr.net/npm/diagrams-js/providers/"
    }
  }
</script>

<script type="module">
  import { Diagram } from "diagrams-js";
  import { EC2 } from "diagrams-js/aws/compute";
  import { RDS } from "diagrams-js/aws/database";

  const diagram = Diagram("My Diagram");
  const web = diagram.add(EC2("Web Server"));
  const db = diagram.add(RDS("Database"));

  web.to(db);

  const svg = await diagram.render();
  document.body.innerHTML = svg;
</script>
Import Maps

Import maps allow you to use bare module specifiers (like diagrams-js/aws/compute) instead of full URLs, making your code cleaner and more portable between bundler and CDN environments.

Next Steps​