Mediawiki Extension Flex Diagrams - Revision history

DochyJP: Text replacement - "[{{fullurl:{{FULLPAGENAMEE}}|action=mpdf}} Download this page as PDF]" to ""

2021-04-14T12:56:13Z

Text replacement - "[{{fullurl:{{FULLPAGENAMEE}}|action=mpdf}} Download this page as PDF]" to ""

DochyJP: Text replacement - " " to " [{{fullurl:{{FULLPAGENAMEE}}|action=mpdf}} Download this page as PDF]"

2021-04-14T12:47:37Z

Text replacement - " " to " [{{fullurl:{{FULLPAGENAMEE}}|action=mpdf}} Download this page as PDF]"

DochyJP: Added template version in infobox for future updates

2021-04-13T06:58:20Z

Added template version in infobox for future updates

DochyJP: Changed Infobox

2021-02-26T13:14:58Z

Changed Infobox

DochyJP: Text replacement - "Template-uk:Class-Infobox-Software" to "Template:Class-Infobox-Software"

2021-02-25T12:36:30Z

Text replacement - "Template-uk:Class-Infobox-Software" to "Template:Class-Infobox-Software"

DochyJP: DochyJP moved page Flex Diagrams to Mediawiki Extension Flex Diagrams without leaving a redirect

2021-02-15T13:43:34Z

DochyJP moved page Flex Diagrams to Mediawiki Extension Flex Diagrams without leaving a redirect

DochyJP: Page creation

2021-02-15T13:42:24Z

Page creation

New page

'''[[PageName::{{PAGENAME}}|]]'''

{{Template-uk:Class-Infobox-Software
|image = 
|Section = [[Section::{{PAGENAME}}]] 
|Source = [[Source::DataSource]] 
|Version = [[Version::MW-1.35-LTS]]
|Language = [[Language::English]]
|Subject = [[Subject::Mediawiki]]
|DocumentType = [[DocumentType::Extension]]
|LastEditBy = [[LastEditBy::{{REVISIONUSER}}]]
|LastEdit = [[LastEdit::{{REVISIONYEAR}}-{{REVISIONMONTH}}-{{REVISIONDAY2}}]]
|DocumentStatus = [[DocumentStatus::Active]] 
}}


== Description ==
Flex Diagrams is an extension that lets you create, and display, diagrams using three different JavaScript libraries: bpmn-js (for BPMN diagrams), DHTMLX Gantt (for Gantt charts), and Mermaid (for various kinds of diagrams, using the Mermaid JavaScript library). Each of these three gets its own namespace.

Any such diagram page will get, in addition to the standard "Edit" tab, an "Edit diagram" tab that allows for editing these diagrams in a graphical way. Thus, any diagram can be edited either as text, or graphically. (Although the Mermaid editor is unfortunately not a true graphical editor, but simply a text editor that includes a preview element.)

== Installation ==
=== Download ===
You can also download the code directly via Git from the MediaWiki source code repository (see available tags). From a command line, call the following:
<pre>
git clone https://gerrit.wikimedia.org/r/mediawiki/extensions/FlexDiagrams.git
</pre>
=== Activation ===
Once you have obtained a "FlexDiagrams" directory and placed it in your /extensions directory, add the following to LocalSettings.php:
<pre>wfLoadExtension( 'FlexDiagrams' );</pre>
=== Configuration ===

=== Usage ===
==== Creating diagrams ====
A BPMN, Gantt, or Mermaid diagram can be created by creating a page in the appropriate namespace (BPMN:, Gantt:, or Mermaid: respectively), for example:
<pre>BPMN:Approval process</pre>
Once the page is created (or while editing in either "Source" or "Visual Editor") a new edit tab called "Edit diagram" (or "Create diagram" if the page has not been saved yet) will be shown, clicking on this editor launches an interactive diagram editor as shown below.
==== Adding links to BPMN diagrams ====
One customization specific to the Flex Diagrams extension is that, when generating a BPMN diagram, you can make any element be a link to a different wiki page. To do this, add the name of the page you want to link to, within double square brackets, at the end of the element title - after either a space or a newline. An example would be a node called "Get approval". Let's say there's a separate page, "BPMN:Approval process", which details all the steps of the process referred to as "Get approval". We can make the "Get approval" node link to "BPMN:Approval process" by changing its label to read "Get approval [[BPMN:Approval process]]". When the diagram is displayed, the link part will not be shown on the screen; instead, the entire node will appear as blue and become a clickable link. You can see examples of how such linking gets displayed in the gallery below.
==== Displaying diagrams ====
Any diagram can be displayed on any page by using the #display_diagram function. This function takes in a single argument, a page name, and displays the diagram defined on that page. An example would be:
<pre>{{#display_diagram:BPMN:Approval process}}</pre>
=== Screenshots ===
<gallery>
File:FlexDiagrams BPMN edit diagram.PNG
File:FlexDiagrams BPMN display.PNG
File:FlexDiagrams Gantt edit diagram.PNG
File:FlexDiagrams Mermaid edit diagram.PNG
</gallery>
=== See also ===
Extension:Cognitive Process Designer

 [[#Top|Back to top of this page]]
 [[English|Back to Welcome Page]] 

[[Category:Mediawiki]]

@@ Line 15: / Line 15: @@
 }}
 <!-- End of Template Infobox Generic-->
-[{{fullurl:{{FULLPAGENAMEE}}|action=mpdf}} Download this page as PDF]== Description ==
+== Description ==
 Flex Diagrams is an extension that lets you create, and display, diagrams using three different JavaScript libraries: bpmn-js (for BPMN diagrams), DHTMLX Gantt (for Gantt charts), and Mermaid (for various kinds of diagrams, using the Mermaid JavaScript library). Each of these three gets its own namespace.

@@ Line 11: / Line 11: @@
 	|LastEdit = [[LastEdit::{{REVISIONYEAR}}-{{REVISIONMONTH}}-{{REVISIONDAY2}}]]
 	|Status = [[Status::Active]] <!--[[Status::Active]]  [[Status::Development]] [[Status::Obsolete]] [[Status::Archived]] [[Status::To Delete]]-->
 }}
 <!-- End of Template Infobox Generic-->

@@ Line 1: / Line 1: @@
-'''<span style="color:white; background:white">[[PageName::{{PAGENAME}}|]]</span>'''
+<!-- Template Infobox Generic-->
-<!-- Template Infobox Software -->
+{{Template:Class-Infobox-Generic<!-- ALL MUST BE FILLED IN -->
 	|image = <!-- If an logo is required, enter the link here -->
-	|Section = [[Section::{{PAGENAME}}]] <!-- DO NOT REMOVE THIS ONE -->
+	|Section = [[Section::{{PAGENAME}}]]
-	|Source = [[Source::DataSource]] <!-- [[Source::DataSource]], [[Source::Semantic Query]], ... -->
+	|Source = [[Source::DataSource]]  <!-- [[Source::DataSource]], [[Source::Query]] ... -->
-	|Version = [[Version::MW-1.35-LTS]]<!-- [[Version::MW-1.31-LTS]] -->
+	|Language = [[Language::English]] <!-- [[Language::English]], [[Language::Français]], [[Language::Nederlands]] -->
-	|Language = [[Language::English]]<!-- [[Language::English]], [[Language::Français]] -->
+	|Topic =  [[Topic::Mediawiki]] <!-- [[Topic::Mediawiki]], [[Subject::Microsoft]], ... -->
-	|Subject =  [[Subject::Mediawiki]]<!-- [[Subject::Mediawiki]], ... -->
+	|SubTopic = [[SubTopic::Mediawiki Extension]] <!-- [[SubTopic::Mediawiki Extension]], [[SubTopic::Office 365]] , ... -->
-         |DocumentType =  [[DocumentType::Extension]]<!-- [[DocumentType::Extension]] -->
+         |DocumentType =  [[DocumentType::Documentation]] <!-- [[DocumentType::User Guide]], [[DocumentType::Procedure]], [[DocumentType::Script]], [[DocumentType::Gallery]], ...-->
-	|LastEditBy = [[LastEditBy::{{REVISIONUSER}}]]<!-- DO NOT REMOVE THIS ONE -->
+	|LastEditBy = [[LastEditBy::{{REVISIONUSER}}]]
-	|LastEdit = [[LastEdit::{{REVISIONYEAR}}-{{REVISIONMONTH}}-{{REVISIONDAY2}}]]<!-- DO NOT REMOVE THIS ONE -->
+	|LastEdit = [[LastEdit::{{REVISIONYEAR}}-{{REVISIONMONTH}}-{{REVISIONDAY2}}]]
-	|DocumentStatus = [[DocumentStatus::Active]] <!--[[DocumentStatus::Active]]  [[DocumentStatus::Development]] [[DocumentStatus::Obsolete]] -->
+	|Status = [[Status::Active]] <!--[[Status::Active]]  [[Status::Development]] [[Status::Obsolete]] [[Status::Archived]] [[Status::To Delete]]-->
 }}
-<!-- End of Template Infobox Software -->
+<!-- End of Template Infobox Generic-->
 == Description ==
 Flex Diagrams is an extension that lets you create, and display, diagrams using three different JavaScript libraries: bpmn-js (for BPMN diagrams), DHTMLX Gantt (for Gantt charts), and Mermaid (for various kinds of diagrams, using the Mermaid JavaScript library). Each of these three gets its own namespace.

← Older revision	Revision as of 13:43, 15 February 2021
(No difference)