0

I want to create a program flow graph, but I don't want to draw it by Mouse. I can draw a simple graph by markdown or mermaid, but they are too simple.

For example: enter image description here this is generated by Typora Mermaid. All items are html.

But I want to modify more details. For example, font highlighting, adding parentheses in content, etc. I also want to generate graphics that look better.

Another Example: enter image description here This is generated by graphviz, if I export it as svg, I can retrieve characters.

But after I insert it in Typora, and export markdown as a.html. However, I can't search characters from svg in a.html, because its label is img. I'm not familiar with HTML, I don't know how to handle this.

I want to find a tool that can render dot language into html, and can work with markdown, How to achieve it? Or any better choices?

VictorV
  • 637
  • 7
  • 16
  • Why do you want this? What do you mean by 'retrieve items' ? Why can't you retrieve items by reading the dot file? Maybe PlantUML is something for you? – www.admiraalit.nl May 28 '19 at 14:21
  • I'm reviewing other people's codes, I want to draw a graph to help me understand program logic. And I hope I can search characters in graph instead of source file because I want to show it in web and visitors can search characters in graph. @www.admiraalit.nl – VictorV May 29 '19 at 10:05
  • Thank you, your question is much more clear now. Unfortunately, I don't have the answer. I will upvote your own answer. – www.admiraalit.nl May 29 '19 at 10:36

1 Answers1

1

I think I should just generate a svg file by dot. A good way to add it in markdown is using html label:<object type="image/svg+xml" data="test.svg"></object>. And chrome would render it.

I'm not sure whether this question is able to keep, but I will keep it until someone asks me to delete it or it's a repeating question.

Here is how I search in a svg. enter image description here

VictorV
  • 637
  • 7
  • 16
  • how do you will retrieve items in it, placing each item in a group with an _id_ (`...`) ? – bruno May 28 '19 at 14:52
  • 1
    Well, I voted to close your question since it's simply too broad. There are thousands of ways to do what you want. Anyhow I'd recommend to use a UML modeling tool since UML is not about diagramming but about modeling. – qwerty_so May 28 '19 at 14:53
  • @bruno How about some self-advertising? ;-) – qwerty_so May 28 '19 at 15:19
  • @ThomasKilian I am too modest for that ... or too lazy to do it ^^ – bruno May 28 '19 at 15:25
  • @Thomas Kilian I'm new of diagramming, I just want to make the graphics to help me understand program logic. And "UML" seems like an appropriate name for it? And please suggest me some advice? – VictorV May 29 '19 at 09:42
  • @bruno Hi, I update me answer, I didn't add html labels in it, I just export it as svg, and I can search characters in chrome. – VictorV May 29 '19 at 09:47
  • Again: UML is not about diagramming. You won't make use of UML by using a drawing tool. Choose a UML modeling tool. Else stay with pencil/paper or a white board. – qwerty_so May 29 '19 at 12:52