MarkdownPad installation and drawing UML diagrams

To edit and view markdown files locally, I chose to install MarkdownPad 2.
I downloaded MarkdownPad 2 from the official website and opened the md file after installation, and This view has crashedthe rendering error appeared
as follows:
Insert picture description here
At the same time, a pop-up screen will be given, and more detailed information can be seen.
The solution to this problem is given in the FAQ document http://markdownpad.com/faq.html#livepreview-directx provided

Search for the above error in the page. This view has crashed
Insert picture description here
It says that we need to download an Awesomium 1.6.6 SDK. I can’t open it when I click on the link. So I found one directly from the Internet. I uploaded it to the resource. After downloading and installing, I opened the md file and the rendering was normal.

If you still have problems after installing the Awesomium 1.6.6 SDK, you can download and install Microsoft's DirectX End-User Runtimes as suggested in the document

The md file created by my colleague used PlantUML to draw UML sequence diagrams (he integrated PlantUML in md through VsCode, reference: VSCode uses PlantUML plug-in to generate UML ), but it can’t be displayed normally in my MarkdownPad 2, check it out The following information found that if we want to use PlantUML diagrams in markdown files, there are two ways:

1. Integrate the image address into Markdown

Integration methods can be divided into three

1) Write code online to generate UML pictures. Then integrate the picture address into Markdown

You can write code online through http://www.plantuml.com/plantuml/uml/SyfFKj2rKt3CoKnELR1Io4ZDoSa70000 to generate pictures, as follows:

Insert picture description here
Click the submit button below to generate the following preview image and corresponding image url

Insert picture description here
Insert picture description here
2) After encoding the url, integrate the image address into the coded website in Markdown

Bob -> Helen: helloThe encoded string is as follows:

Bob%20-%3E%20Helen%3A%20hello%0A

After splicing, it http://g.gravizo.com/svg?can be used in markdown
Insert picture description here

3) Enclose the URL without encoding and use <> to integrate the image address into Markdown
Insert picture description here

Insert picture description here
Note that the URL connection in <> cannot have a carriage return symbol, but can have spaces

2), 3) The disadvantage of the method is that it is not suitable for more complex codes, and is relatively suitable for the reference of class diagrams. For complex sequence diagrams, it is generally impossible to display the desired UML diagram; and 1) for any use UML diagrams drawn by PlantUML code can be displayed normally

2. Use Gravizo drawing engine

Only need to use Url to include PlantUML code and put it in an img tag, then we can draw the UML diagram we need online and in real time. as follows :

<img src='https://g.gravizo.com/svg?
abstract class AbstractList;
interface List;
List <|.. AbstractList;
'/>

Of course, this also needs to be displayed in the integrated Markdown which supports Gravizo. If my Markdown Pad does not support Gravizo, the above method cannot be used.

If you are interested in PlantUML, you can read the following article 21 Minutes Getting Started with UML or the official website to understand the grammar of PlantUML. Compared with other UML drawing tools, the syntax of PlantUML is relatively simple, and we don't need to modify the lines a little bit when adjusting UML diagrams.

Reference materials:
Markdown drawing UML diagram-PlantUML + Gravizo
markdown+gravizo drawing UML class diagram

Guess you like

Origin blog.csdn.net/qq_35448165/article/details/109258623