Skip to content
Automatically save your diagrams modeled in Camunda Modeler
JavaScript CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.


Type Name Latest commit message Commit time
Failed to load latest commit information.
.editorconfig chore(project): add linting Nov 22, 2019
.eslintignore chore(project): add linting Nov 22, 2019
.eslintrc chore(project): add linting Nov 22, 2019
.gitignore chore(project): update gitignore Nov 22, 2019
LICENSE Initial commit Oct 16, 2019 chore(README): link to stable plugins docs Nov 22, 2019
package-lock.json chore(project): add linting Nov 22, 2019
package.json chore(project): add linting Nov 22, 2019


Build Status Compatible with Camunda Modeler version 3.4

This offers an auto save mechanism to save your diagram changes after a defined amount of time.

This includes an example plugin on how to extend the Camunda Modeler user interface as React component.

How to use

  1. Download and copy this repository into the plugins directory of the Camunda Modeler
  2. Start the Camunda Modeler
  3. Enable and configure auto save mechanism via Modal

Refer to the plugins documentation to get detailed information on how to create and integrate Camunda Modeler plugins.

Development Setup

Firstly, clone this repository to your machine

$ git clone
$ cd camunda-modeler-autosave-plugin

Install all dependencies

$ npm install

To work properly inside the Camunda Modeler this plugin needs to be bundled.

$ npm run all

Compatibility Notice

This plug-in is compatible with Camunda Modeler v3.4+.


The AutoSavePlugin component implements the basic functionality to render the auto save mechanism into the Camunda Modeler application.

First of all it offers a render method to return the React component to be included in the application. It handles the appearance configuration modal via it's state and fills an action button into the application's Toolbar component.

render() {
  const {
  } = this.state;

  const initValues = {

  // we can use fills to hook React components into certain places of the UI
  return <Fragment>
    <Fill slot="toolbar" group="9_autoSave">
      <button type="button" onClick={() => this.setState({ configOpen: true })}>
        Configure autosave
    { this.state.configOpen && (
        onClose={ this.handleConfigClosed }
        initValues={ initValues }

When the plugin component got first time rendered (cf. componentDidMount), it retrieves plugin specific information from the application configuration to properly configure the auto save mechanism.

// retrieve plugin related information from the application configuration
config.getForPlugin('autoSave', 'config')
  .then(config => this.setState(config));

Furthermore, it hooks into certain application events to properly setup and restart the auto save timer.

 // subscribe to the event when the active tab changed in the application
subscribe('app.activeTabChanged', ({ activeTab }) => {

  if (this.state.enabled && activeTab.file && activeTab.file.path) {

// subscribe to the event when a tab was saved in the application
subscribe('tab.saved', () => {
  if (!this.timer && this.state.enabled) {

As a main purpose the extension should save diagram changed after a defined amount of time. To do this, it uses the given triggerAction functionality to send a save request to the application. When something got wrong, plugins are even allowed to display notification on the UI.

save() {
  const {
  } = this.props;

  // trigger a tab save operation
    .then(tab => {
      if (!tab) {
        return displayNotification({ title: 'Failed to save' });

To properly work inside the Camunda Modeler application, every plugin needs to have a general entry point, in this example named the index.js. This gives general information about where to find the React component, general styling and, if needed, application menu extensions. To get detailed information about how to integrate a plugin into the Camunda Modeler, please refer to the existing plugins documentation.

module.exports = {
  script: './dist/client.js',
  style: './client/style.css',
  name: 'autosave-plugin'

To work inside a browser application, the React extension needs to be bundled. Refer to the webpack.config.js on how to achieve this.




You can’t perform that action at this time.