Code Monkey home page Code Monkey logo

text-to-diagram-site's Introduction

Text to diagram comparisons

Go to comparisons site

Compare syntax, layouts, outputs between languages for generating diagrams with text.

Screen Shot 2022-10-22 at 3 57 45 PM

ci daily license

Full disclosure: This is created and maintained by Terrastruct. We created D2, and it's in our interest to provide anyone evaluating us with an objective comparison against alternatives. The only favor granted to D2 is that it shows up as the first comparison. We welcome contributions. Even ones that make D2 look bad (it'll be motivation for us to patch it!).

Currently supported comparisons

High-quality comparisons take a lot of work, which will only get more as the number of examples grows. Other than D2, the currently supported set are what seem to be the most popular tools for text-to-diagram.

  • D2
  • Mermaid
  • GraphViz
  • PlantUML

For completeness, you may want to also evaluate less popular tools/languages. The best catalog we've found is https://xosh.org/text-to-diagram/.

FAQ

Contributing

Run locally

yarn && yarn dev

Adding examples

Please follow the examples in src/examples.

  1. Create a folder in src/examples with a short name of the example
  2. Add in that folder:
  • description.txt to describe what the example aims to demonstrate.
  • render/ for SVG renders
  • syntax/ for texts
  • If there are languages with errors for this example, error/
  1. Create the text for as many languages as you can. It's okay if not totally complete. We or others can fill.
  2. Run ./render.sh (with the respective tools installed)

CLI render

Adding features

If you think there's a significant feature that people want to compare against, feel free to add a line in src/components/Features.tsx.

Adding languages

If you wish to add a new language, please fill out as many of the examples and features as possible. It's a lot of work, but if there's enough interest in the language, perhaps others will help out.

text-to-diagram-site's People

Contributors

alixander avatar aloisklink avatar gillescoolen avatar knsv avatar movermeyer avatar nhooyr avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

text-to-diagram-site's Issues

Include PGF/TikZ?

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.

Adjust PlantUML comparison to align with latest PlantUML versions.

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:

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.

[Question] PlantUML images from any URL?

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?

make the list of PlantUML "Features" more fair

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

In addition:

URL params to direct comparison

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

PlantUML tree example syntax change

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.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.