Ir al contenido

Usar GraphoJS sin npm (CDN)

Para un prototipo rápido, una demo de una sola página, o simplemente probar la librería sin montar un proyecto, no hace falta npm install ni ningún bundler: los navegadores modernos soportan módulos ES nativos, y unpkg sirve cualquier paquete de npm como archivos estáticos. Basta con un import map que apunte graphojs/go al archivo real publicado.

Guarda esto como un .html y ábrelo directamente en el navegador (o súbelo a cualquier hosting estático):

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>GraphoJS sin npm</title>
<script type="importmap">
{
"imports": {
"graphojs/go": "https://unpkg.com/graphojs@1.9.0/dist/go.js"
}
}
</script>
<style>
html, body { margin: 0; height: 100%; }
#diagram { width: 100%; height: 100%; }
</style>
</head>
<body>
<div id="diagram"></div>
<script type="module">
import * as go from 'graphojs/go';
const $ = go.GraphObject.make;
const diagram = new go.Diagram('diagram');
diagram.background = '#fafbfc';
diagram.nodeTemplate = $(
go.Node,
'Auto',
$(go.Shape, 'RoundedRectangle', {
fill: '#e3f2fd',
stroke: '#1976d2',
strokeWidth: 2,
}),
$(go.TextBlock, { margin: 8 }, new go.Binding('text', 'label')),
);
diagram.model = new go.GraphLinksModel({
nodeDataArray: [
{ key: 1, label: 'Sin npm install' },
{ key: 2, label: 'Sin bundler' },
{ key: 3, label: 'Solo un <script type="module">' },
],
linkDataArray: [
{ from: 1, to: 2 },
{ from: 2, to: 3 },
],
});
diagram.zoomToFit();
</script>
</body>
</html>
  • Fija siempre una versión exacta (@1.0.0, no @latest ni sin versión). unpkg sin versión resuelve al último publicado — si sale una versión nueva con cambios, tu página cambiaría de comportamiento sin que tú tocaras nada.
  • unpkg no resuelve subpaths de package.json’s exports por su cuenta: pedir https://unpkg.com/graphojs@1.9.0/go directamente da 404 — hay que apuntar al archivo real dentro de dist/ (https://unpkg.com/graphojs@1.9.0/dist/go.js). El import map de arriba ya hace esa traducción por ti: en tu código siempre importas del specifier normal graphojs/go, igual que con npm.
  • Este patrón funciona igual para graphojs/templates (https://unpkg.com/graphojs@1.9.0/dist/templates.js). Para graphojs/react o graphojs/vue necesitarías además React/Vue como módulos ES en el import map — para esos casos, un bundler sigue siendo lo más práctico.
  • Nada de esto es específico de GraphoJS: es el mecanismo estándar de import maps del navegador. Si ya usas esto con otras librerías, lo reconocerás.

Cuando estés listo para un proyecto real, usa npm install graphojs — el import map es ideal para prototipar, pero un bundler te da mejores tiempos de carga, tree-shaking y comprobación de tipos en desarrollo.