Control de diagramas de flujo Biblioteca de JavaScript GoJS para gráficos HTML

GoJS es un control de diagrama de flujo poderoso, rápido y liviano que puede ayudarlo a crear diagramas de flujo en programas JavaScript y HTML5 Canvas, y simplificar enormemente sus programas JavaScript / Canvas.

Huidu descarga la última versión de GoJS

Empezando con GoJS

GoJS es una biblioteca flexible que se puede utilizar para crear muchos tipos diferentes de gráficos interactivos, incluida la visualización de datos, herramientas de dibujo y editores de gráficos. Hay diagramas de flujo de muestra, organigramas, procesos comerciales BPMN, carriles de natación, horarios, diagramas de estado, Kanban, red, mapas mentales, Sankey, diagramas de genealogía y genealogía, diagramas de espina de pescado, planos de planta, UML, árboles de decisión, PERT Gráficos, diagramas de Gantt y cientos de personas. GoJS incluye muchos diseños integrados, incluidos diseños de árbol, diseños de gráficos orientados a la fuerza, radial y jerárquica, y muchos ejemplos de diseños personalizados.

GoJS utiliza la representación de elementos HTML Canvas (exportados a SVG o formato de imagen). GoJS se puede ejecutar en un navegador web o en el lado del servidor de Node o Puppeteer. Los diagramas de GoJS son compatibles con los modelos y, por lo general, se guardan y cargan mediante JSON.

Obtenga más información sobre GoJS en gojs.net.
Este repositorio contiene bibliotecas y fuentes para todos los ejemplos, extensiones y documentación. Puede usar el repositorio de GitHub para buscar rápidamente todas las fuentes.

muestra

Construya el diagrama creando una o más plantillas (con el enlace de datos de atributos requerido) y agregando datos del modelo.
<script src = "go.js"> </script>

<script id = "código">
función init () {
var $ = go.GraphObject.make; // para concisión en la definición de plantillas

var myDiagram =
  $(go.Diagram, "myDiagramDiv",  // create a Diagram for the DIV HTML element
    { // enable undo & redo
      "undoManager.isEnabled": true
    });

// define a simple Node template
myDiagram.nodeTemplate =
  $(go.Node, "Auto",  // the Shape will go around the TextBlock
    $(go.Shape, "RoundedRectangle",
      { strokeWidth: 0, fill: "white" },  // default fill is white
      // Shape.fill is bound to Node.data.color
      new go.Binding("fill", "color")),
    $(go.TextBlock,
      { margin: 8 },  // some room around the text
      // TextBlock.text is bound to Node.data.key
      new go.Binding("text", "key"))
  );

// but use the default Link template, by not setting Diagram.linkTemplate

// create the model data that will be represented by Nodes and Links
myDiagram.model = new go.GraphLinksModel(
[
  { key: "Alpha", color: "lightblue" },
  { key: "Beta", color: "orange" },
  { key: "Gamma", color: "lightgreen" },
  { key: "Delta", color: "pink" }
],
[
  { from: "Alpha", to: "Beta" },
  { from: "Alpha", to: "Gamma" },
  { from: "Beta", to: "Beta" },
  { from: "Gamma", to: "Delta" },
  { from: "Delta", to: "Alpha" }
]);

}
</script> El
diagrama anterior y el código del modelo crean el siguiente diagrama. Los usuarios ahora pueden hacer clic en los nodos o enlaces para seleccionarlos, copiarlos y pegarlos, arrastrarlos, eliminarlos, usar el mouse o el dedo para desplazarse, desplazarse y hacer zoom.

Soporte
Northwood Software proporciona a GoJS soporte gratuito de desarrollador a desarrollador durante un mes para ayudarlo a comenzar su proyecto.

Lea y busque en el foro oficial de GoJS para encontrar cualquier tema relacionado con su pregunta.

Para cualquier pregunta no técnica sobre GoJS, como preguntas sobre ventas o licencias, visite el formulario de contacto de Northwoods Software.

Si desea comprar una licencia GoJS genuina o para obtener más información sobre el producto, haga clic en [Consultar servicio al cliente en línea]