AIDE SUR LES NœUDS

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

Name: IronPDF
Brand: Iron Software
Availability: InStock
Rating: 4.87 (307 reviews)

Darrius Serrant

septembre 29, 2024

Business Process Model and Notation (BPMN) est une norme de modélisation de 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-js est construit sur des technologies de modélisation web modernes 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 diagramme BPMN en utilisant IronPDF.

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'identité visuelle et aux exigences de leurs applications.
Extensibilité : bpmn-js est conçu avec l'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 que 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 kits de modification.

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

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

SHELL

Étape 2 : Installation de bpmn-js

Ensuite, installez la bibliothèque bpmn-js :

npm install bpmn-js

npm install bpmn-js

SHELL

Étape 3 : Création de la structure HTML

Créez un fichier index.html avec le contenu 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');
  }
});

js

JAVASCRIPT

BPMN JS npm (Fonctionnement pour les développeurs) : Figure 1 - Sortie de rendu de 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 .

npm install -g http-server
http-server .

SHELL

Ouvrez votre navigateur et accédez à http://localhost:8080 pour voir le diagramme BPMN affiché 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 la documentation 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 PDFs à partir de HTML, d'URL ou de contenu brut avec aisance.
Manipulation de PDF : Fusionner, diviser et modifier des documents PDF existants.
Conversion : Convertissez divers formats de documents (comme HTML et images) en PDF.
Personnalisation : Personnalisez l'apparence et la mise en page des fichiers PDF avec une large gamme d'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

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

SHELL

Étape 2 : Installation des dépendances

Installer IronPDF :

npm i @ironsoftware/ironpdf

npm i @ironsoftware/ironpdf

SHELL

BPMN JS npm (Comment cela 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);
      });
  });
});

js

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

js

JAVASCRIPT

BPMN JS npm (Comment cela 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 page de licence IronPDF. Pour obtenir une meilleure compréhension ou des ressources supplémentaires, consultez notre tutoriel détaillé sur la conversion HTML en PDF.

Darrius Serrant

Discutez avec l'équipe d'ingénierie maintenant

Ingénieur Logiciel Full Stack (WebOps)

Darrius Serrant est titulaire d'une licence en informatique de l'Université de Miami et travaille en tant qu'ingénieur marketing Full Stack WebOps chez Iron Software. Attiré par le code depuis son plus jeune âge, il a vu l'informatique comme à la fois mystérieuse et accessible, en faisant le support parfait pour la créativité et la résolution de problèmes.

Chez Iron Software, Darrius apprécie de créer de nouvelles choses et de simplifier des concepts complexes pour les rendre plus compréhensibles. En tant que l'un de nos développeurs résidents, il a également fait du bénévolat pour enseigner aux étudiants, partageant son expertise avec la prochaine génération.

Pour Darrius, son travail est épanouissant car il est apprécié et a un réel impact.

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

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