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>Detalles importantes
Sección titulada «Detalles importantes»- Fija siempre una versión exacta (
@1.0.0, no@latestni 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’sexportspor su cuenta: pedirhttps://unpkg.com/graphojs@1.9.0/godirectamente da404— hay que apuntar al archivo real dentro dedist/(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 normalgraphojs/go, igual que con npm. - Este patrón funciona igual para
graphojs/templates(https://unpkg.com/graphojs@1.9.0/dist/templates.js). Paragraphojs/reactographojs/vuenecesitarí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.