2021-06-03 09:20:57 +00:00
|
|
|
# diagram-js Code Editor
|
2021-06-03 05:45:51 +00:00
|
|
|
|
2021-06-03 09:20:57 +00:00
|
|
|
[![Build Status](https://travis-ci.com/bpmn-io/diagram-js-minimap.svg?branch=master)]()
|
2021-06-03 05:45:51 +00:00
|
|
|
|
2021-06-03 09:20:57 +00:00
|
|
|
A code editor for diagram-js.
|
2021-06-03 05:45:51 +00:00
|
|
|
|
2021-06-03 09:20:57 +00:00
|
|
|
![Code Editor](resources/screenshot.png)
|
2021-06-03 05:45:51 +00:00
|
|
|
|
|
|
|
|
|
|
|
## Features
|
|
|
|
|
2021-06-03 09:20:57 +00:00
|
|
|
* [x] Modify script tasks with python formatting
|
|
|
|
* [ ] Tests scripts in place with feedback
|
|
|
|
* [ ] View externally provided data and functions
|
2021-06-03 05:45:51 +00:00
|
|
|
|
|
|
|
## Usage
|
|
|
|
|
2021-06-03 09:20:57 +00:00
|
|
|
Extend your diagram-js application with the coding module. We'll use [bpmn-js](https://github.com/bpmn-io/bpmn-js) as an example:
|
2021-06-03 05:45:51 +00:00
|
|
|
|
|
|
|
```javascript
|
|
|
|
import BpmnModeler from 'bpmn-js/lib/Modeler';
|
|
|
|
|
2021-06-03 09:20:57 +00:00
|
|
|
import codingModule from 'diagram-js-code-editor';
|
2021-06-03 05:45:51 +00:00
|
|
|
|
|
|
|
var bpmnModeler = new BpmnModeler({
|
|
|
|
additionalModules: [
|
|
|
|
minimapModule
|
|
|
|
]
|
|
|
|
});
|
|
|
|
```
|
|
|
|
|
|
|
|
For proper styling integrate the embedded style sheet:
|
|
|
|
|
|
|
|
```html
|
2021-06-03 09:20:57 +00:00
|
|
|
<link rel="stylesheet" href="diagram-js-minimap/assets/diagram-js-code-editor.css" />
|
2021-06-03 05:45:51 +00:00
|
|
|
```
|
|
|
|
|
2021-06-03 09:20:57 +00:00
|
|
|
Please see [this example]() for a more detailed instruction.
|
2021-06-03 05:45:51 +00:00
|
|
|
|
|
|
|
|
|
|
|
## License
|
|
|
|
|
|
|
|
MIT
|