terrastruct / text-to-diagram-site Goto Github PK

Will need to install the various tools and set TSTRUCT_TOKEN for tala.

Hi,
I was checking out the comparison with mermaid and came across this error.

The latest version (v9.2.2) of CLI seems to render it.
mermaid-js/mermaid-cli#432 (comment)

Can you please update that?
D2 looks great btw!

Thank you.

PlantUML supports math via AsciiMath and Latex (via JLaTeXMath). The comparison presents a view of a legacy approach to generating diagrams into LaTeX versus rendering diagrams with LaTeX.

(Here's a similar project for rendering PlantUML into LaTeX: )

For rendering math in PlantUML see this area.
Go here to see the recent changes and evolution.

I created an example to test:

@startuml
skinparam componentStyle rectangle
skinparam defaultTextAlignment center
skinparam defaultFontSize 14
skinparam defaultFontName Arial
skinparam component {
  borderColor DarkBlue
  backgroundColor MOTIVATION
}


[plankton] -r-> [formula \n\n\n <latex>\lim_{h \rightarrow 0 } \frac{f(x+h)-f(x)}{h}</latex> \n]: <latex>\dfrac{d}{dx}f(x)=\lim\limits_{h \to 0}\dfrac{f(x+h)-f(x)}{h}</latex>
@enduml

Paste the above at the following links to see it render:

• https://www.plantuml.com/plantuml/uml/SyfFKj2rKt3CoKnELR1Io4ZDoSa70000
• https://www.planttext.com/
• https://plantuml-editor.kkeisuke.com/

I came across D2 as I am starting a new project and evaluating the latest in text to diagrams prior to selection of the rest of my tooling. In doing a feature/capability comparison, I found the above.

Of note in my comparison, I didn't find a functional way to add/render LaTeX to labels for connection in D2. I provided that as part of this example.

I can't comment on the popularity outside math & science research, but [PGF/TikZ] is a well-established and very capable graphics / diagramming language. It's a text-based, LaTeX-based, declarative* language with a lot of extensions for figures ranging from complex mathematics to Gantt charts. It is mostly intended for manual / programmer-specified layout (though with reasonable enough defaults happening automatically) and subjectively I'd say it sets the bar for flexibility and expressiveness in that context. I would definitely not use it to automatically layout 100s of nodes in an ERD, but it would totally be suitable for making the "non-automatable" example from the D2 roadmap.

Anyway, just a thought.

It would be interesting to see how d2 van map network diagram, like nwdiag

https://github.com/blockdiag/nwdiag

hilariously complex, therefore suitable for exercising layout algorithms

Hi

Can you please add the very popular Python diagrams module to the comparison site?

https://diagrams.mingrammer.com/

https://github.com/mingrammer/diagrams

Thanks

Hari

https://mobile.twitter.com/elonmusk/status/1593899029531803649

https://www.copetti.org/writings/consoles/wiiu

pikchr is a modern interpreter of pic markup language used to draw diagrams. Would be nice to see how modern tools stand up to it.

Example diagram:

More info: https://pikchr.org/home/doc/trunk/homepage.md

GraphViz is old, but its DOT language is quite known by many users. It would be helpful to add it to the comparison.

https://mermaid.js.org/syntax/stateDiagram.html
https://plantuml.com/state-diagram

https://text-to-diagram.com/?example=basic&a=d2&b=mermaid

also layout engine as optional param

https://text-to-diagram.com/?example=basic&a=d2&b=d2&layoutA=tala&layoutB=dagre

Continuing #40 , I looked at the list Features at the bottom of https://text-to-diagram.com/?b=plantuml.
Here are my comments on features marked as not supported by PlantUML

• Friendly error messages: Not just "syntax error"
  True, but it shows the exact error location
• Images & Icons: What are the available options for including images and icons: Any URL
  • It has some HTML tags, including <img> that lets you use any URL as image: https://plantuml.com/creole#f42f1366d9ab93bb.
  • In addition, it has a very wide set of icons (https://plantuml.com/openiconic), unicode emojis (https://plantuml.com/unicode and https://plantuml.com/creole#68305e25f5788db0) and sprites (https://plantuml.com/sprite and https://plantuml.com/stdlib)
• Markdown: Use Markdown for text objects in the diagram
  True, but it has https://plantuml.com/creole which is just about the same
• LaTeX: Render math equations suitable for academic usage
  Yes, see https://plantuml.com/ascii-math
• Native Github rendering: Does it render natively on Github:
  I guess that depends on plugins and addons. Eg for me, neither https://github.com/terrastruct/d2/blob/master/docs/flow.d2 nor https://github.dev/terrastruct/d2/blob/master/docs/flow.d2 are rendered, but PlantUML is rendered using https://chrome.google.com/webstore/detail/plantuml-visualizer/ffaloebcmkogfdkemcekamlmfkkmgkcf (eg see diagrams below)
• Code snippets: Render syntax-highlighted code snippets
  PlantUML supports code snippets, see https://plantuml.com/creole#ca0dbad92a874b2f, but currently not code highlighting.
  Then again, who wants a lot of code in a diagram?
• Responsive dark mode: Can the diagram render with both light and dark mode, switching depending on user preference.
  Yes, there is at http://www.plantuml.com/plantuml/ (the next URL token is uml for light mode, duml for dark)
  
• PDF exports: Can the CLI export PDF output:
  It only requires adding some jars: https://plantuml.com/pdf

In addition:

• you should not use square brackets in nodes (eg [foo] in https://text-to-diagram.com/?b=plantuml&example=containers because these get rendered as "components" with an interface icon, not simple rectangles
• PlantUML supports a large number of non-UML diagrams, see https://plantuml.com/

I was curious regarding two statements regarding PlantUML and images/icon:

Icons: Icons and images are essential to professional-looking diagrams. How do the different tools handle it? Note: PlantUML's icon system is to include pre-packaged icon sets, so the example shown is one that uses their icon set.

and

Features	PlantUML
Images & Icons: What are the available options for including images and icons	X

As far as I'm aware, in PlantUML, an icon or image can be loaded from any URL. At least, I've not had any issues thus far.
Am I missing something, or am I reading the content wrong?

As stated in the title, I want to know how many ways D2 supports for annotating cardinality and participation.

For the PlantUML tree example, the syntax should be changed from -> to -->. It drastically changes how it is rendered, and will actually look like a tree with the change.

Sequence diagramming capability is not updated in the comparative demo here.