AIDE SUR LES NœUDS

BPMN JS npm (Comment ça marche pour les développeurs)

Publié septembre 29, 2024

Modèle et Notation de Processus Métier(BPMN)est une norme pour la modélisation des processus qui fournit une représentation graphique pour spécifier les processus métier dans un flux de travail. bpmn-js est une bibliothèque puissante qui vous permet d'intégrer des diagrammes d'éléments BPMN dans des applications web, offrant des capacités interactives et de nombreuses options de personnalisation. Développé par Camunda,bpmn-jsest construit sur des technologies modernes de modélisation web et peut être intégré de manière transparente dans les applications JavaScript. Nous verrons également comment créer un PDF avec des éléments de diagrammes BPMN en utilisantIronPDF.

Fonctionnalités clés de bpmn-js

Modélisation Interactive : bpmn-js permet aux utilisateurs de créer des éléments BPMN, de modifier et de visualiser des diagrammes de manière interactive. Son interface conviviale prend en charge la fonctionnalité de glisser-déposer, facilitant ainsi la conception de workflows complexes.
Personnalisation : La bibliothèque est hautement personnalisable, permettant aux développeurs d'adapter l'apparence des diagrammes BPMN pour correspondre à l'image de marque et aux exigences de leurs applications.
Extensibilité : bpmn-js est conçu avec une extensibilité à l'esprit. Les développeurs peuvent étendre la fonctionnalité de base en ajoutant des éléments, propriétés et comportements personnalisés au modèle d'interaction du diagramme BPMN.
Intégration : Il s'intègre bien avec d'autres bibliothèques et frameworks, tels qu'Angular et React, facilitant son utilisation dans un large éventail d'applications web.
Conformité aux normes : bpmn-js respecte la norme BPMN 2.0, garantissant que les diagrammes créés sont compatibles avec d'autres outils BPMN et systèmes de trousse à outils d'édition.

Commencer avec bpmn-js

Pour commencer avec bpmn-js, vous devrez configurer un projet web de base. Voici un guide étape par étape pour créer un diagramme simple en utilisant bpmn-js.

Étape 1 : Mise en place du projet

Tout d'abord, créez un nouveau répertoire pour votre projet et initialisez un projet Node.js en utilisant les commandes suivantes :

mkdir bpmn-js-demo
cd bpmn-js-demo
npm init -y

Étape 2 : Installation de bpmn-js

Ensuite, installez la bibliothèque bpmn-js :

npm install bpmn-js

Étape 3 : Création de la structure HTML

Créez un fichier index.html avec le contenu du code source suivant :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>bpmn-js Demo</title>
  <style>
    #canvas {
      width: 100%;
      height: 600px;
      border: 1px solid #ccc;
    }
  </style>
</head>
<body>
  <div id="canvas"></div>
  <script src="app.js"></script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>bpmn-js Demo</title>
  <style>
    #canvas {
      width: 100%;
      height: 600px;
      border: 1px solid #ccc;
    }
  </style>
</head>
<body>
  <div id="canvas"></div>
  <script src="app.js"></script>
</body>
</html>

HTML

Étape 4 : Création du fichier JavaScript

Créez un fichier app.js pour initialiser et rendre le diagramme BPMN :

import BpmnViewer from 'bpmn-js/lib/NavigatedViewer';
// XML string
const bpmnXML = `<?xml version="1.0" encoding="UTF-8"?>
<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:omgdi="http://www.omg.org/spec/DD/20100524/DI" id="sample-diagram" targetNamespace="http://bpmn.io/schema/bpmn" exporter="bpmn-js (https://demo.bpmn.io)" exporterVersion="17.6.4" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd">
  <process id="Process_1" isExecutable="false">
    <startEvent id="StartEvent_1">
      <outgoing>Flow_1a5niwu</outgoing>
    </startEvent>
    <task id="Activity_0ncu32f" name="This is the Test Diagram">
      <incoming>Flow_1a5niwu</incoming>
    </task>
    <sequenceFlow id="Flow_1a5niwu" sourceRef="StartEvent_1" targetRef="Activity_0ncu32f" />
  </process>
  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">
      <bpmndi:BPMNShape id="StartEvent_1_di" bpmnElement="StartEvent_1">
        <omgdc:Bounds x="152" y="102" width="36" height="36" />
      </bpmndi:BPMNShape>
      <bpmndi:BPMNShape id="Activity_0ncu32f_di" bpmnElement="Activity_0ncu32f">
        <omgdc:Bounds x="240" y="80" width="100" height="80" />
        <bpmndi:BPMNLabel />
      </bpmndi:BPMNShape>
      <bpmndi:BPMNEdge id="Flow_1a5niwu_di" bpmnElement="Flow_1a5niwu">
        <omgdi:waypoint x="188" y="120" />
        <omgdi:waypoint x="240" y="120" />
      </bpmndi:BPMNEdge>
    </bpmndi:BPMNPlane>
  </bpmndi:BPMNDiagram>
</definitions>`;
const viewer = new BpmnViewer({
  container: '#canvas'
});
viewer.importXML(bpmnXML, function(err) {
  if (err) {
    console.error('Error rendering', err);
  } else {
    console.log('BPMN diagram rendered');
  }
});

import BpmnViewer from 'bpmn-js/lib/NavigatedViewer';
// XML string
const bpmnXML = `<?xml version="1.0" encoding="UTF-8"?>
<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:omgdi="http://www.omg.org/spec/DD/20100524/DI" id="sample-diagram" targetNamespace="http://bpmn.io/schema/bpmn" exporter="bpmn-js (https://demo.bpmn.io)" exporterVersion="17.6.4" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd">
  <process id="Process_1" isExecutable="false">
    <startEvent id="StartEvent_1">
      <outgoing>Flow_1a5niwu</outgoing>
    </startEvent>
    <task id="Activity_0ncu32f" name="This is the Test Diagram">
      <incoming>Flow_1a5niwu</incoming>
    </task>
    <sequenceFlow id="Flow_1a5niwu" sourceRef="StartEvent_1" targetRef="Activity_0ncu32f" />
  </process>
  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">
      <bpmndi:BPMNShape id="StartEvent_1_di" bpmnElement="StartEvent_1">
        <omgdc:Bounds x="152" y="102" width="36" height="36" />
      </bpmndi:BPMNShape>
      <bpmndi:BPMNShape id="Activity_0ncu32f_di" bpmnElement="Activity_0ncu32f">
        <omgdc:Bounds x="240" y="80" width="100" height="80" />
        <bpmndi:BPMNLabel />
      </bpmndi:BPMNShape>
      <bpmndi:BPMNEdge id="Flow_1a5niwu_di" bpmnElement="Flow_1a5niwu">
        <omgdi:waypoint x="188" y="120" />
        <omgdi:waypoint x="240" y="120" />
      </bpmndi:BPMNEdge>
    </bpmndi:BPMNPlane>
  </bpmndi:BPMNDiagram>
</definitions>`;
const viewer = new BpmnViewer({
  container: '#canvas'
});
viewer.importXML(bpmnXML, function(err) {
  if (err) {
    console.error('Error rendering', err);
  } else {
    console.log('BPMN diagram rendered');
  }
});

JAVASCRIPT

BPMN JS npm(Comment ça fonctionne pour les développeurs) : Figure 1 - Sortie de rendu du diagramme BPMN

Étape 5 : Exécution du projet

Pour servir le projet, vous pouvez utiliser un simple serveur statique comme http-server :

npm install -g http-server
http-server .

Ouvrez votre navigateur et allez à http://localhost:8080 pour voir le diagramme BPMN rendu sur la page.

Utilisation avancée de bpmn-js

Bien que l'exemple ci-dessus couvre les bases, bpmn-js offre des fonctionnalités plus avancées, telles que l'ajout d'éléments personnalisés, l'intégration avec des systèmes backend et l'exportation de diagrammes. Vous pouvez explorer ces fonctionnalités dans leDocumentation bpmn-js.

Présentation d'IronPDF pour JavaScript

IronPDF est une bibliothèque puissante qui permet aux développeurs de générer, manipuler et convertir des documents PDF de manière programmatique. Conçu à l'origine pour .NET, IronPDF a été étendu pour prendre en charge JavaScript, offrant des fonctionnalités robustes de génération de PDF pour les applications web.

Fonctionnalités clés d'IronPDF pour JavaScript

Génération de PDF : Créez des PDF à partir de HTML, d'URL ou de contenu brut en toute simplicité.
Manipulation de PDF : Fusionner, diviser et modifier des documents PDF existants.
Conversion : Convertir divers formats de documents(comme HTML et images) au PDF.
Personnalisation : Personnalisez l'apparence et la mise en page des PDFs avec de nombreuses options de style.

Intégration de IronPDF avec bpmn-js

Pour démontrer l'intégration d'IronPDF avec bpmn-js, créons un projet Node.js qui génère un PDF à partir d'un diagramme BPMN.

Étape 1 : Mise en place du projet

Créez un nouveau répertoire pour votre projet et initialisez-le :

mkdir bpmn-ironpdf-demo
cd bpmn-ironpdf-demo
npm init -y

Étape 2 : Installation des dépendances

Installer IronPDF :

npm i @ironsoftware/ironpdf

BPMN JS npm(Comment ça fonctionne pour les développeurs) : Figure 2 - IronPDF

Étape 3 : Création du diagramme BPMN et script de génération de PDF

Créez un fichier nommé generatePDF.js :

const fs = require('fs');
const { createCanvas } = require('canvas');
const BpmnViewer = require('bpmn-js/lib/Viewer');
const PdfGenerator = require('@ironsoftware/ironpdf');
// BPMN XML data
const bpmnXML = `<?xml version="1.0" encoding="UTF-8"?>
<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL"
             xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
             xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI"
             xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC"
             xmlns:omgdi="http://www.omg.org/spec/DD/20100524/DI"
             xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd"
             id="sample-diagram"
             targetNamespace="http://bpmn.io/schema/bpmn">
  <process id="Process_1" isExecutable="false">
    <startEvent id="StartEvent_1"/>
  </process>
  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">
      <bpmndi:BPMNShape id="StartEvent_1_di" bpmnElement="StartEvent_1">
        <omgdc:Bounds x="173" y="102" width="36" height="36"/>
      </bpmndi:BPMNShape>
    </bpmndi:BPMNPlane>
  </bpmndi:BPMNDiagram>
</definitions>`;
const canvas = createCanvas(800, 600);
const viewer = new BpmnViewer({ container: canvas });
viewer.importXML(bpmnXML, function(err) {
  if (err) {
    console.error('Error rendering BPMN diagram:', err);
    return;
  }
  viewer.get('canvas').zoom('fit-viewport');
  const stream = canvas.createPNGStream();
  const out = fs.createWriteStream('diagram.png');
  stream.pipe(out);
  out.on('finish', () => {
    console.log('BPMN diagram saved as PNG');
    // Generate PDF from the saved PNG
    PdfGenerator.imageToPdf(filePaths)
      .then((pdf) => {
        pdf.saveAs('diagram.pdf');
        console.log('PDF generated and saved as diagram.pdf');
      })
      .catch((error) => {
        console.error('Error generating PDF:', error);
      });
  });
});

const fs = require('fs');
const { createCanvas } = require('canvas');
const BpmnViewer = require('bpmn-js/lib/Viewer');
const PdfGenerator = require('@ironsoftware/ironpdf');
// BPMN XML data
const bpmnXML = `<?xml version="1.0" encoding="UTF-8"?>
<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL"
             xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
             xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI"
             xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC"
             xmlns:omgdi="http://www.omg.org/spec/DD/20100524/DI"
             xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd"
             id="sample-diagram"
             targetNamespace="http://bpmn.io/schema/bpmn">
  <process id="Process_1" isExecutable="false">
    <startEvent id="StartEvent_1"/>
  </process>
  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">
      <bpmndi:BPMNShape id="StartEvent_1_di" bpmnElement="StartEvent_1">
        <omgdc:Bounds x="173" y="102" width="36" height="36"/>
      </bpmndi:BPMNShape>
    </bpmndi:BPMNPlane>
  </bpmndi:BPMNDiagram>
</definitions>`;
const canvas = createCanvas(800, 600);
const viewer = new BpmnViewer({ container: canvas });
viewer.importXML(bpmnXML, function(err) {
  if (err) {
    console.error('Error rendering BPMN diagram:', err);
    return;
  }
  viewer.get('canvas').zoom('fit-viewport');
  const stream = canvas.createPNGStream();
  const out = fs.createWriteStream('diagram.png');
  stream.pipe(out);
  out.on('finish', () => {
    console.log('BPMN diagram saved as PNG');
    // Generate PDF from the saved PNG
    PdfGenerator.imageToPdf(filePaths)
      .then((pdf) => {
        pdf.saveAs('diagram.pdf');
        console.log('PDF generated and saved as diagram.pdf');
      })
      .catch((error) => {
        console.error('Error generating PDF:', error);
      });
  });
});

JAVASCRIPT

Étape 4 : Exécution du script

Exécutez le script pour générer le diagramme BPMN et l'enregistrer au format PDF :

node generatePDF.js

node generatePDF.js

JAVASCRIPT

BPMN JS npm(Comment ça fonctionne pour les développeurs) : Figure 3 - Sortie PDF

Conclusion

L'intégration de bpmn-js et d'IronPDF vous permet de créer des diagrammes BPMN interactifs et de les convertir en documents PDF, combinant la puissance de la modélisation de processus visuels avec la polyvalence de la génération de PDF. Cette intégration peut être particulièrement utile pour générer de la documentation, des rapports ou tout autre format nécessitant une représentation visuelle des processus. Les deux bibliothèques offrent une documentation et un support étendus, ce qui facilite la prise en main et l'approfondissement des exemples de base fournis.

Pour des détails complets sur la licence IronPDF, consultez la licence IronPDF.page. Pour approfondir votre compréhension ou obtenir des ressources supplémentaires, consultez notre tutoriel détaillé surConversion de HTML en PDF.

< PRÉCÉDENT
Moment.js (Comment cela fonctionne pour les développeurs)

SUIVANT >
analyseur de corps node (Comment ça fonctionne pour les développeurs)