谈一谈bpmn-js中的moddleExtensions

已于 2024-03-05 14:10:40 修改
阅读量115 收藏
点赞数
分类专栏： Bpmn-js 流程建模器实战 文章标签： bpmn-js bpmn-moddle 元模型描述 moddle
于 2024-03-05 14:09:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chf1142152101/article/details/136477255
版权

bpmn-js是一个基于BPMN 2.0规范定义的一个bpmn文件读写一体化编辑解决方案，其中bpmn的读写功能依托于bpmn-moddle工具库来实现。使用bpmn-moddle来进行bpmn文件的读取和写入不是随心所欲的，它又一套自己的校验标准，默认的bpmn-moddle是基于BPMN 2.0 元模型进行校验输入并生成对应的xml文件的。使用bpmn-moddle进行模型创建和维护的控制也是为了保证我们模型的元素和属性的一致性，方便我们的模型迁移后者复用。当校验不通过，我们的建模器将无法成功创建bpmn模型，bpmn-js中的显示效果如下：

BPMN 2.0 元模型

为了保证建模的一致性原则，我们所有基于BPMN 2.0实现的建模生成器，都必须要满足BPMN 2.0元模型描述说明, BPMN 2.0元模型要求必须支持如下的所有子元素和对应元素属性：

元素 属性
了解本专栏 订阅专栏 解锁全文 超级会员免费看
胖蔡
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
火影推荐程序连载35-最好用的流程编辑器bpmn-js系列之基本使用
li123128的博客
09-17 529
BPMN（Business Process Modeling Notation）是由业务流程管理倡议组织BPMI（The Business Process Management Initiative）开发的一套标准的业务流程建模符号规范。其目的是为用户提供一套容易理解的标准符号，这些符号作为BPMN的基础元素，将业务流程建模简单化、图形化，将复杂的建模过程视觉化，让业务建模者、业务实施人员、管理监督人员对BPMN描述的业务流程都有一个更加清晰明了的了解。 BPMN的主要意义在于其作为一个标准，业务相关者都
可视化流程编排(Bpmn.js)介绍及实践
ZhongAnTech的博客
11-02 703
目前无界山工单平台对接40+流程，实现IT类工单、消保审核流程的上线运行、同时与各事业部就健康险台账流程、无界山2.0理赔流程、数生理赔特殊案件审核等相关保险业务流程进行了对接。
bpmn-js-examples:一些使用bpmn-js的示例
04-28
bpmn-js示例 该存储库包含许多示例，这些示例显示了如何使用并将其集成到您的应用程序中。 起动机 -开始使用使用我们的。 基本的 -一个示例，说明如何通过安装bpmn-js，如何在节点样式的应用程序中使用bpmn-js以及如何将其和应用程序代码打包到。 -向游客展现不同的方式将颜色添加到您的BPMN图。 -听图表事件并对它们做出React。 -将覆盖图附加到BPMN 2.0图表以提供自定义按钮或显示其他信息。 用于BPMN 2.0流程图的简单url查看器。 中间的 -一个简单的BPMN 2.0建模器。 随着时间的流逝获得更多功能。 commenting-在BPMN 2.0图表之上构建的简单注释应用程序 bpmn-properties-使用bpmn-js读写BPMN属性。 i18n-将自定义翻译模块与bpmn-js一起使用。 properties-panel-添加一个属性面
bpmn-js-token-simulation:用于令牌模拟的bpmn-js扩展
05-11
寻找Camunda Modeler插件？ 得到它！ bpmn-js令牌模拟 用于令牌模拟的bpmn-js扩展。 安装 通过安装。 npm install bpmn-js-token-simulation 作为附加模块添加到 。 造型师 var BpmnModeler = require ( 'bpmn-js/lib/Modeler' ) ; var tokenSimulation = require ( 'bpmn-js-token-simulation' ) ; var modeler = new BpmnModeler ( { container : '#canvas' , additionalModules : [ tokenSimulation ] } ) ; 观看者 var BpmnViewer = require ( 'bpmn-js/lib/Navi
bpmn-js-bpmnlint:bpmn-js的bpmnlint插件
04-28
bpmn-js-bpmnlint 将集成到。 将此扩展作为一部分进行操作。 用法 将linter集成到： import lintModule from 'bpmn-js-bpmnlint' ; import BpmnModeler from 'bpmn-js/lib/Modeler' ; import bpmnlintConfig from './.bpmnlintrc' ; const modeler = new BpmnModeler ( { linting : { bpmnlint : bpmnlintConfig } , additionalModules : [ lintModule ] } ) ; 捆绑棉绒规则 为模块捆绑器使用适当的插件/加载器（参见和 ），将bpmnlint配置直接与您的应用捆绑在一起，如上。 或者，使用实用程序打包本
camunda-bpmn-js:基于bpmn-js的可嵌入Camunda建模分布
04-09
camunda-bpmn-js 基于可嵌入Camunda建模分布。 用法 该项目旨在提供不同的BPMN建模分布。 无需基于创建自定义Modeler实现，而是选择现有的软件包之一以反映产品的建模经验。 使用预先打包的发行版 < link rel =" stylesheet " href =" https://unpkg.com/camunda-bpmn-js@0.1.0/dist/assets/camunda-platform-modeler.css " /> < script src =" https://unpkg.com/camunda-bpmn-js@0.1.0/dist/camunda-platform-modeler.development.js " > </ script > 或通过npm安装 import BpmnModeler from 'camunda-bpmn-j
bpmn-moddle：从JavaScript读取和写入BPMN 2.0 XML
02-06
bpmn模块 在NodeJS和浏览器中读写BPMN 2.0图表文件。 bpmn-moddle使用来验证输入并生成正确的BPMN 2.0 XML。 用法 通过获取库。 通过UMD在NodeJS中使用它，或使用您喜欢的模块捆绑器将其捆绑在浏览器中。 import BpmnModdle from 'bpmn-moddle' ; const moddle = new BpmnModdle ( ) ; const xmlStr = '<?xml version="1.0" encoding="UTF-8"?>' + '<bpmn2:definitions xmlns:bpmn2="http
bpmn-js调研
qq_22167557的博客
03-21 3544
BPMN.js
没有一个顺手的流程绘制工具？好吧，自己动手，丰衣足食
江南一点雨的专栏
08-29 4786
流程绘制工具感觉也挺常用的，而且流程图基本上也都标准化了，标准化的东西其实是最容易做的，但是 IDEA 上却一直没有一个称手的流程绘制工具，其实这也是一个机会吧哈哈，自己搞一个 IDEA 插件～不过这个机会留给各位正在阅读本文的小伙伴吧，松哥今天跟大家介绍另外一个工具 bpmn.js，利用这个，再结合大家熟悉的 Vue，我们就可以开发出一个自己的流程绘制工具，一起来看下。先看下效果图：好了，不废话了，开搞！...
Activiti工作流绘制框架npmn-js个性化调整
peng_wei_kang的博客
04-26 6627
首先看展示 注意：由于我没有设置用户机构数据访问接口的IP地址，导致我用户信息获取失败！ 实现以下个性化功能 npmn-js框架英文汉化。 候选人与候选组可以通过 用户、机构（角色）选择。 npmn-js框架英文汉化实现 通过代码追踪，最后发现node_modules/bpmn-js-properties-panel/lib/provider/camunda/CamundaProp...
vue集成bpmn.js
qq_21277357的博客
11-11 3747
/打开package.json,下面的版本必须按照这个来,否则报错。//创建customTranslate.js 内容如下。//创建translations.js 内容如下。//浏览器打开地址,下面就是集成好的界面了。//在App.vue直接替换,内容如下。//在main.js直接替换,内容如下。//vue必须选择2的版本,否则报错。//安装bpmn 后面记得改版本。//删除node_modules。//先提前安装好cnpm。// 创建一个Vue项目。// 安装一下项目依赖，//然后重新安装依赖。
bpmn-js-i18n:bpmn-js的国际化资源
05-25
bpmn-js翻译 该存储库收集用户界面元素，消息和工具提示的社区维护的翻译。 可用翻译 使用翻译 遵循并用此存储库中的一种语言文件替换。 贡献 创建一个并提供翻译。 检出以获取可用消息的列表。 执照 麻省理工学院
camunda-bpmn-moddle:BPMN 2.0的Camunda模块扩展
04-09
camunda-bpmn-模块 该项目将BPMN 2.0的名称空间扩展定义为描述符。 用法 将其与一起使用以验证Camunda BPMN 2.0扩展。 var BpmnModdle = require ( 'bpmn-moddle' ) ; var camundaModdle = require ( 'camunda-bpmn-moddle/resources/camunda' ) ; var moddle = new BpmnModdle ( { camunda : camundaModdle } ) ; var serviceTask = moddle . create ( 'bpmn:ServiceTask' , { 'javaDelegate' : 'my.company.SomeDelegate' } ) ; 建设项目 要运行包含XSD模式验证的测试套件，您必须安装Jav
Type ‘ComputedRef＜xxx＞‘ is not assignable to type ‘xxxx‘.
最新发布
qubes的专栏
04-08 154
定位原因: 使用时类型是 ComputedRef 而不是需要的 ModdleExtensions。computed 数据使用 .value 来获取。
Bpmn-js快速入门
我们的征途是星辰大海
09-21 1万+
1、功能介绍 bpmn-js是一个渲染工具包和一个（流程节点）建模器的结合。在使用的时候，既可以是查看模式，也可以是建模（编辑）模式。 1.1、以代码包形式使用查看器 通过在浏览器引入bpmn-viewer，然后使用BpmnJS创建查看器对象，读取bpmnXml配置文件即可。 let viewer = new BpmnJS({container: '#canvas'}); viewer.importXML(bpmnXml, function(err) { if (err) {
bpmn-js快速上手及汉化
weixin_44213308的博客
03-29 7384
一、效果 二、结构 三、步骤 1、引入依赖包 2、入口文件（index.vue） <template> <div> <a @click="$refs.modeler.showDrawer()">流程图设计器</a> <modeler ref="modeler"/> </div> </template> <script> import modeler from
activiti bpmnModel使用
热门推荐
分享牛
01-06 6万+
bpmnModel对象，是activiti动态部署钟很重要的一个对象，如果bpmnModel对象不能深入的理解，那可能如果自己需要开发一套流程设计器，就显得力不从心，之前我们公司自己开发了一套activiti web设计器，如下图所示： 当activiti web设计器设计的时候，存储格式是自定义的json对象，那现在问题来了，我们怎么把我们自己的json格式转化为标准的bpm...
vue3集成bpmn-js——适配activiti工作流
qq_34731982的博客
11-18 1万+
1、安装bpmn-js npm install bpmn-js 2、vue引入相关依赖 import { markRaw } from 'vue'; import 'bpmn-js/dist/assets/diagram-js.css'; import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'; import BpmnModeler from 'bpmn-js/lib/Modeler'; 3、页面 <div id="co
bpmn-js-bpmnlint
09-15
bpmn-js-bpmnlint是一个用于在bpmn-js中使用BPMNLint进行代码检查的插件。通过将该扩展集成到bpmn-js中，您可以在编写BPMN模型时使用BPMNLint来检查模型的规范性和潜在问题。为了将BPMNLint集成到bpmn-js中，您需要按照以下步骤进行操作： 1. 首先，您需要导入`bpmn-js-bpmnlint`插件和其他必要的依赖项。您可以使用类似下面的代码来导入它们： ```javascript import lintModule from 'bpmn-js-bpmnlint'; import BpmnModeler from 'bpmn-js/lib/Modeler'; import bpmnlintConfig from './.bpmnlintrc'; ``` 2. 然后，您需要创建一个新的BpmnModeler实例，并将BPMNLint配置文件和lintModule作为附加模块传递给它。您可以使用以下代码创建实例： ```javascript var modeler = new BpmnModeler({ linting: { bpmnlint: bpmnlintConfig }, additionalModules: [ lintModule ] }); ``` 通过执行上述步骤，您就可以成功地将bpmn-js-bpmnlint插件集成到bpmn-js中，以便在编写BPMN模型时使用BPMNLint进行代码检查。请注意，您还需要确保安装了所需的依赖项，如'bpmn-js'，'bpmn-js-properties-panel'，'camunda-bpmn-moddle'和'diagram-js-minimap'。您可以使用类似`yarn add bpmn-js bpmn-js-properties-panel camunda-bpmn-moddle diagram-js-minimap`的命令来安装它们。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

胖蔡

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值