How can I create a UML graph by code and I can search characters in graph?

Question

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: 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: 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?

Answer 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.