Extension:Cognitive Process Designer

**MediaWiki 拡張機能マニュアル**
Cognitive Process Designer; リリースの状態: 安定
実装	ページの操作, Ajax, 特別ページ
説明	Draw BPMN processes with a graphical user interface in Semantic MediaWiki
作者	Tobias Weller, Maria Maleshkova and Alexander Pinchuk
最新バージョン	4.0.0-alpha
互換性の方針	長期間サポートリリースであるすべての MediaWiki リリースについて、拡張機能に対応するブランチが存在します。
MediaWiki	>= 1.39.0
ライセンス	GNU 一般公衆利用許諾書 3.0 のみ
ダウンロード	拡張機能をダウンロード ; Git [?]: Git master をダウンロード; リポジトリを参照 (GitHub); コミット履歴; リポジトリの貢献者 (GitHub); コードレビュー;
	パラメーター $wgCPDEntityElementTypes; $wgCPDHappyPathSMWPropertyName;
	追加する権限 cognitiveprocessdesigner-editbpmn;
	使用するフック BSUEModulePDFBeforeAddingStyleBlocks; BSUEModulePDFBeforeCreatePDF; LoadExtensionSchemaUpdates; MakeGlobalVariablesScript; OutputPageBeforeHTML; ParserFirstCallInit;
四半期ごとのダウンロード数	15 (Ranked 118th)
	translatewiki.net で翻訳を利用できる場合は、Cognitive Process Designer 拡張機能の翻訳にご協力ください

This page is a translated version of the page Extension:Cognitive Process Designer and the translation is 17% complete.

The Cognitive Process Designer extension supports the creation, importing, exporting and annotating of BPMN (Business Process Model and Notation) processes by using an intuitive GUI (graphical user interface). Each element (node and edge) is represented by its own wiki page, which publishes the information according to the Linked Data Principles. Cognitive Process is based on bpmn.io, an open source project by Camunda. Bpmn.io is an JavaScript renderer that allows to model BPMN processes and checks the syntax. Semantic Forms is used to facilitate the input of information for each element.

インストール

ダウンロードして、ファイルをextensions/フォルダー内のCognitiveProcessDesignerという名前のディレクトリ内に配置します。
開発者とコード寄稿者は、上記の代わりに以下を使用してGitからインストールします:cd extensions/ git clone https://gerrit.wikimedia.org/r/mediawiki/extensions/CognitiveProcessDesigner
Gitでのインストールの場合のみ、PHPの依存関係をインストールするためComposerを実行します。 (合併症の可能性についてはタスク T173141を参照。)
以下のコードを LocalSettings.php ファイルの末尾に追加します:
```
wfLoadExtension( 'CognitiveProcessDesigner' );
```
For REL1_35 and upper branches - setup of processRunner.php is needed. See note below for the details.
完了 – ウィキの「Special:Version」に移動して、拡張機能が正しくインストールされたことを確認します。

注:

In REL1_35 and upper branches "process manager" ^[1] is used to save diagram elements on the server. In that case processRunner.php must be running to correctly save BPMN diagram. See how to setup it. For the most cases - just execute
```
php extensions/CognitiveProcessDesigner/vendor/mwstake/mediawiki-component-processmanager/maintenance/processRunner.php maintenance/Maintenance.php --wait
```
from wiki root in the separate terminal window.
Semantic MediaWiki must be installed in order to provide information for the elements in a structured way and publish the information according to the Linked Data Principles, which helps to avoid having an unbounded web.
file uploads for SVG file types must be allowed and the images directory must be writable (chmod 755)^[2]

使用法

Create diagrams

To create BPMN diagram on specific page - add such page content:

<bpmn name="{diagramName}" />

or

<bpmn name="{diagramName}" ></bpmn>

where {diagramName} is name of BPMN diagram needed to be created.

After that, wiki page with title {diagramName} will be created, it will contain XML content of diagram. All diagram elements will be created with such title pattern: {diagramName}/{elementName}

Visual part of diagram (which is used to interact with diagram) will be displayed on the page where ‎<bpmn> tag was used.

Load diagrams

To load an existing BPMN diagram from wiki, enter the name of the existing BPMN diagram inside <bpmn> tag. If there is no page with this title in the wiki, new diagram will be created. Otherwise, it will load the diagram from the wiki.

Import diagrams

In order to import an existing BPMN 2.0 diagram, stored in XML format, there are two possibilities:

Via button
Via drag&drop

To import a diagram, you first have to either create a new diagram or load an existing diagram under which the diagram is stored (Important: If a diagram is loaded, the diagram is overwritten by importing the new BPMN diagram). Afterwards either

click on the importing button on the bottom left of the screen and select the BPMN 2.0 XML file from your local computer
import the BPMN 2.0 XML file via drag&drop by dropping the BPMN 2.0 XML file over the middle of the editor screen.

Afterwards, the diagram is available for editing purposes.

Important: After importing the diagram, the wiki pages for each element of the BPMN diagram are created. Therefore, immediate annotating of elements after importing the BPMN diagram can take some time, until the pages are created. However, editing the element is immediately possible.

Export diagrams

Following formats are supported to export BPMN diagrams:

BPMN 2.0 XML
SVG format

Click on the bottom left on the appropriate button in order to export a diagram. The I/O Menu shown below has the following functionality (from left to right):

Import existing local BPMN diagram, stored as BPMN 2.0 XML
Create new BPMN diagram from scratch with the entered name (Important: There are no security checks; The old diagram will be overwritten and the BPMN diagram name from the init screen is used to store the new information)
Export BPMN diagram as BPMN 2.0 XML file to local system
Export BPMN diagram as SVG file to local system

Import/Export Menu: Import local BPMN 2.0 XML file, Create empty diagram, Export as BPMN 2.0 XML file, Export as SVG file

Create elements

Creating an element (node and edge) leads to the creation of a wiki page that represents the element.

To create an element, there are two options:

Either use the sidebar: Click on an element and then drop it on the appropriate position in the diagram
Or use the context menu: Click on an element and select a new node type. Therefore, a new edge is also automatically created that links from the node to the new created element.

Change elements

Click on the wrench of the context menu of an element to select the type in which the element should be changed.

Important: Changing an element leads to creating a new wiki page for the new element and transfer the content of the old page to the new wiki page. The content of the old wiki page is then deleted.

Delete elements

The deletion of an element in Cognitive Process leads to the deletion of content of the wiki page that represents the element. The wiki page itself is not deleted, but the content. This is because, often only admins have the permision to delete a page but not users.

To delete a element. Click on the bin icon of the context menu.

Annotate elements

Each element (node and edge) in the BPMN process can be annotated. This can be done by

Manually changing the content of the wiki page that represents the wiki page or
Semantic Forms, which is included into the extension.

Manually annotate elements

Each element is represented by its own wiki page. Therefore, information for this element can be added on its page. In order to facilitate to get to the wiki page, which represents the element, we included an icon in the context menu that links to the wiki page.

Click on an BPMN element in order to open the context menu.
Click on the angular arrow below the magnifier to jump to the wiki page that represents the BPMN element.

This is an examplary wiki page that represents a BPMN element. It contains among other information like position, height, width and label of the BPMN element. Additional information can be added to the wiki page in order to annotate the element.

Using Semantic Forms

In order to faciliate annotating a BPMN element, one can also use Semantic Forms.

In order to annotate a BPMN element by using Semantic Forms, click on the element so that the contex tmenu appers. Afterwards click on the magnifier. Afterwards, all available Forms, stored in the MediaWiki, are listed. Click on the Forms with which the element should be annotated.

After clicking on a Semantic Form, a popup appears that allows to easily annotate the element with the selected form.

Displaying diagrams on the BPMN wiki pages

The diagrams can be displayed on the wiki pages since version 0.7. Therefore you have to insert the code, described in Section "Remarks" on the 1th July 2016, on the MediaWiki:Common.js. Afterwards, BPMN diagrams are shown on the corresponding wiki page.

Remark: BPMN code, not created with the Cognitive Process Designer, can also be displayed on wiki pages. Therefore, include on a random page the following code:

<div id="processXml" class="toccolours mw-collapsible mw-collapsed">The following code shows the XML Serialization of the Process:<div class="mw-collapsible-content">
<<<BPMN 2.0 XML Code>>>
</div>
</div>

Where <<<BPMN 2.0 XML Code>>> is the BPMN 2.0 XML code, created with your BPMN Modeling tool. The diagrams on the wiki pages can be exported and changed. However, any changes on the wiki pages are not stored permanently. We decided this to prevent unwanted changes. Changing diagrams is at the moment only possible via the Cognitive Process Designer Special Page.

Known issues

Shortcuts does currently not work with the Cognitive Process Designer. So changes with shortcuts are not stored. We will include shortcuts in later versions.

Future work

Adding Shortcuts and latest bpmn-js

Remarks

2016年5月23日: Bug with Edge labels has been solved
2016年7月1日: BPMN Diagrams can now be displayed on the corresponding BPMN wiki pages. The diagrams can be changed, however, the information is not stored permanently. To display the diagrams, please add the following code on MediaWiki:Common.js

The following code must be included into MediaWiki:Common.js to display BPMN diagrams on the BPMN wiki page

if (document.getElementById('processXml')) {
    var txt = '<div class="content" id="js-drop-zone" style="height: 800px"><div class="canvas" id="js-canvas" style="height:800px"></div></div><div id="importExport" class="io-import-export"> <!--[if !IE]><!--> <ul class="io-export io-control io-control-list io-horizontal"><li>  <a target="_blank" href class="download" title="download BPMN diagram" jswidget="downloadBPMN" data-track="diagram:download-bpmn"><span class="icon-download"></span>  </a></li><li>  <a target="_blank" href class="download" title="download as SVG image" jswidget="downloadSVG" data-track="diagram:download-svg"><span class="icon-picture"></span>  </a></li> </ul> <!--<![endif]-->  </div><div class="io-alerts">    <div class="io-control alert" jswidget="import-warnings-alert">      <a href class="close" aria-hidden="true" jsaction="click:bio.clearImportDetails">×</a>      Diagram may not render correctly due to import warnings.      <a href jsaction="click:bio.showImportDetails">Show details</a>.    </div>    <div class="io-control alert" jswidget="undo-redo-alert">      You edited the diagram.      <a href jsaction="click:bio.undo">Undo last change</a>.      <a href class="close" aria-hidden="true" jsaction="click:bio.hideUndoAlert">×</a>    </div>  </div>  <div id="infoBox" class="io-editing-tools" jswidget="editing-tools">  </div>  <div class="io-zoom-controls">    <ul class="io-zoom-reset io-control io-control-list">      <li>        <button title="reset zoom" jsaction="click:bio.zoomReset">          <span class="icon-size-reset"></span>        </button>      </li>    </ul>    <ul class="io-zoom io-control io-control-list">      <li>        <button title="zoom in" jsaction="click:bio.zoomIn">          <span class="icon-plus"></span>        </button>      </li>      <li>        <hr/>      </li>      <li>        <button href title="zoom out" jsaction="click:bio.zoomOut">          <span class="icon-minus"></span>        </button>      </li>    </ul>  </div>';

    loadCSS("../extensions/CognitiveProcessDesigner/Display/Display-app.css");
    loadCSS("../extensions/CognitiveProcessDesigner/Display/Display-diagram-js.css");

    $("#mw-content-text").append(txt);
    loadScript("../extensions/CognitiveProcessDesigner/Display/Display-appTestSuite.js", function() {});
}

function loadScript(url, callback) {

    var script = document.createElement("script")
    script.type = "text/javascript";

    if (script.readyState) { //IE
        script.onreadystatechange = function() {
            if (script.readyState == "loaded" ||
                script.readyState == "complete") {
                script.onreadystatechange = null;
                callback();
            }
        };
    } else { //Others
        script.onload = function() {
            callback();
        };
    }

    script.src = url;
    document.getElementsByTagName("head")[0].appendChild(script);
}

function loadCSS(href) {

    var cssLink = $("<link>");
    $("head").append(cssLink); //IE hack: append before setting href

    cssLink.attr({
        rel: "stylesheet",
        type: "text/css",
        href: href
    });

}

2016年7月4日: Added some basic information on the BPMN wiki pages by clicking on the elements. More useful information about the elements will be included in later versions.

Cognitive Process Designer リリースの状態: 安定

実装	ページの操作 , Ajax, 特別ページ
説明	Draw BPMN processes with a graphical user interface in Semantic MediaWiki
作者	Tobias Weller, Maria Maleshkova and Alexander Pinchuk
最新バージョン	4.0.0-alpha
互換性の方針	長期間サポートリリースであるすべての MediaWiki リリースについて、拡張機能に対応するブランチが存在します。
MediaWiki	>= 1.39.0
ライセンス	GNU 一般公衆利用許諾書 3.0 のみ
ダウンロード	拡張機能をダウンロード Git ^[?]: Git master をダウンロードリポジトリを参照 (GitHub) コミット履歴リポジトリの貢献者 (GitHub) コードレビュー
パラメーター $wgCPDEntityElementTypes $wgCPDHappyPathSMWPropertyName
追加する権限 cognitiveprocessdesigner-editbpmn
使用するフック BSUEModulePDFBeforeAddingStyleBlocks BSUEModulePDFBeforeCreatePDF LoadExtensionSchemaUpdates MakeGlobalVariablesScript OutputPageBeforeHTML ParserFirstCallInit
四半期ごとのダウンロード数	15 (Ranked 118^th)
translatewiki.net で翻訳を利用できる場合は、Cognitive Process Designer 拡張機能の翻訳にご協力ください