8/26/2021
22

Jul 31, 2020 I found out about js-sequence-diagrams, a javascript library that makes turning text into vector UML sequence diagrams very simple. I wanted to be able to add these diagrams into my MkDocs markdown. Sample Sequence Diagram In Rowan Patents drafting, you can use a simple script to automatically generate sequence diagrams complete with part names for all of the objects and interactions. In the Drawing Tool, click the Add button and select the From Markdown option. 支持 ToC 目录(Table of Contents)、Emoji 表情、Task lists、@链接等 Markdown 扩展语法; 支持 TeX 科学公式(基于 KaTeX)、流程图 Flowchart 和 时序图 Sequence Diagram; 支持识别和解析 HTML 标签,并且支持自定义过滤标签解析,具有可靠的安全性和几乎无限的扩展性;.

PlantUML
Original author(s)Arnaud Rosques
Developer(s)Arnaud Roques[1]
Initial release17 April 2009[2]
Stable release
Repository
Written inJava
Operating systemLinux, OS X, Windows
Available inJava
TypeUML tool
LicenseGNU General Public License
Websiteplantuml.com

PlantUML is an open-source tool allowing users to create diagrams from a plain text language. Besides various UML diagrams, PlantUML has support for various other Software development related formats (such as Archimate, Block diagram, BPMN, C4, Computer network diagram, ERD, Gantt chart, Mind map, and WBD), as well as visualisation of JSON and YAML files.

The language of PlantUML is an example of a domain-specific language.[4] Besides its own DSL, PlantUML also understands AsciiMath, Creole, DOT, and LaTeX. It uses Graphviz software to layout its diagrams and Tikz for LaTeX support. Images can be output as PNG, SVG, LaTeX and even ASCII art. PlantUML has also been used to allow blind people to design and read UML diagrams.[5][6]

Applications that use PlantUML[edit]

There are various extensions or add-ons that incorporate PlantUML.

  • Atom has a community maintained PlantUML syntax highlighter and viewer.
  • Confluence wiki has a PlantUML plug-in for Confluence Server, which renders diagrams on-the-fly during a page reload. There is an additional PlantUML plug-in for Confluence Cloud.
  • Doxygen integrates diagrams for which sources are provided after the startuml command.
  • Eclipse has a PlantUML plug-in.
  • Google Docs has an add-on called PlantUML Gizmo that works with the PlantUML.com server.
  • IntelliJ IDEA can create and display diagrams embedded into Markdown (built-in) or in standalone files (using a plugin).
  • LaTeX using the Tikz package has limited support for PlantUML.
  • LibreOffice has Libo_PlantUML extension to use PlantUML diagrams.
  • MediaWiki has a PlantUML plug-in which renders diagrams in pages as SVG or PNG.[7]
  • Microsoft Word can use PlantUML diagrams via a Word Template Add-in. There is an additional Visual Studio Tools for Office add-in called PlantUML Gizmo that works in a similar fashion.
  • NetBeans has a PlantUML plug-in.
  • Org-mode has a PlantUML org-babel support.
  • Rider has a PlantUML plug-in.
  • Visual Studio Code has various PlantUML extensions on its marketplace, most popular being PlantUML by jebbs.
  • Vnote open source notetaking markdown application has built in PlantUML support.[8]

Text format to communicate UML at source code level[edit]

PlantUML uses well-formed and human-readable code to render the diagrams.

There are other text formats for UML modelling but PlantUML supports many diagram types and does not need an explicit layouting, though it is possible to tweak the diagrams if necessary.

Example[edit]

Uml Sequence Diagram Markdown

The source code for the class diagram shown on the right is as follows:

UML Class diagram showing an example of the Facade design pattern.

See also[edit]

Markdown Draw Graph

Wikimedia Commons has media related to PlantUML.
Markdown

References[edit]

  1. ^'PlantUML overview'.
  2. ^'Plantuml'.
  3. ^'list of evolutions and bug fixes'.
  4. ^Campagne, Fabien (June 16, 2014). The MPS Language Workbench, Vol. 1. CreateSpace Independent Publishing Platform. ISBN9781497378650.
  5. ^Luque, L.; Veriscimo, E.S.; Pereira, G.C.; Filgueiras, L.V.L. (2014). 'Can We Work Together? On the Inclusion of Blind People in UML Model-Based Tasks'. In P.M. Langdon; J. Lazar; A. Heylighen; et al. (eds.). Inclusive Designing Joining Usability, Accessibility, and Inclusion (Aufl. 2014 ed.). Cham: Springer International Publishing. ISBN978-3-319-05095-9.
  6. ^Müller, Karin (2012). 'How to Make Unified Modeling Language Diagrams Accessible for Blind Students'. In Miesenberger, Klaus (ed.). Computers Helping People With Special Needs 13th International Conference, ICCHP 2012, Linz, Austria, July 11-13, 2012, Proceedings, Part I. Berlin [u.a.]: Springer-Verlag New York Inc. pp. 186–190. ISBN978-3-642-31521-3.
  7. ^'Extension:PlantUML - MediaWiki'. www.mediawiki.org. Retrieved 2018-10-21.
  8. ^'Vnote'.

External links[edit]

Retrieved from 'https://en.wikipedia.org/w/index.php?title=PlantUML&oldid=1021502277'
  • Sequence Diagrams
  • Mermaid
    • Mermaid Options

Typora supports some Markdown extensions for diagrams, once they are enabled from preference panel.

When exporting as HTML, PDF, epub, docx, those rendered diagrams will also be included, but diagrams features are not supported when exporting markdown into other file formats in current version. Besides, you should also notice that diagrams is not supported by standard Markdown, CommonMark or GFM. Therefore, we still recommend you to insert an image of these diagrams instead of write them in Markdown directly.

This feature uses js-sequence, which turns the following code block into a rendered diagram:

For more details, please see this syntax explanation.

Sequence Diagrams Options

You could change CSS variable --sequence-theme to set theme for sequence diagrams, supported value are simple (default) and hand. For example, add following CSS in Custom CSS, and you will get:

–sequence-theme: simple–sequence-theme: hand

This feature uses flowchart.js, which turns the following code block into a rendered diagram:

Typora also has integration with mermaid, which supports sequence diagrams, flowcharts, Gantt charts, class and state diagrams, and pie charts.

Sequence Diagrams

Fruity loops 3.56 full. For more details see these instructions.

Flowcharts

For more details see these instructions.

Gantt Charts

For more details see these instructions.

Sequence Diagram Markdown

Class Diagrams

For more details see these instructions.

State Diagrams

For more details see these instructions.

Pie Charts

Mermaid Options

Overview

You can change Mermaid options by adding Custom CSS, supported options include:

Please note that if you export document with other themes than currently used one, some mermaid options will not be applied to exported HTML / PDF / Image. For example, if you currently use them Github, but while export to PDF, you set theme YYY for PDF export, and YYY.css defines --mermaid-sequence-numbers: on, then the --mermaid-sequence-numbers: on would not be applied to exported PDF.

Mermaid Theme

Added --mermaid-theme css variable to quickly define a mermaid theme that fits your theme, the value can be base, default, dark, forest, neutral, night (the one used in night theme), for example:

CSSMermaid Demo
:root {--mermaid-theme:dark;}
:root {--mermaid-theme:forest;}
:root {--mermaid-theme:neutral;}

Auto Numbering

Diagram

Add --mermaid-sequence-numbers: on; in Custom CSS will enable auto numbering for sequence in mermaid:

–mermaid-sequence-numbers:off–mermaid-sequence-numbers:on

Flowchart Curve

Markdown

Add --mermaid-flowchart-curve: basis to get other type of curves.

–mermaid-flowchart-curve: linear;–mermaid-flowchart-curve: basis–mermaid-flowchart-curve: natural;–mermaid-flowchart-curve: step;

Gantt Padding

–mermaid–gantt-left-padding:75–mermaid–gantt-left-padding:200