
Diagram.codes - hugozap
https://diagram.codes
======
anonytrary
I love that you can write relatively simple declarative markup which is
automatically turned into a visual diagram. I would use this for prototyping
and private notes, but probably not for any kind of presentation or UI, as the
output is still crude.

Your value proposition is that the user doesn't have to think about
positioning and other stuff. This is a great optimization for _certain_ use-
cases, but it will definitely diminish your addressable market. Many
diagramming use-cases need the additional customization that positioning
provides.

One might think there's an algorithm that can produce perfectly optimal layout
for any declaration (input text). I believe it will be difficult to find this
algorithm, since |ideal_layout - computed_layout| could be different for every
use case even if the declaration is a constant.

There are a couple ways to solve this problem. The layout output from your
algorithm should instead be an ansatz. You present the "suggested" layout for
a given declaration, then let the user fine-tine the positioning if they need
to for their use-case.

Another way to solve the problem would be to allow the user to specify
positional weights in the declaration which your layout generator uses as
additional input to decide where to place nodes.

~~~
hugozap
Wow that's great insight, we are evaluating mechanisms to hint the UI and
provide customizatoons without excluding non technical users. As I stated
elsewhere 2nd phase is improving output quality. Thanks for the excellent
feedback.

~~~
anonytrary
No problem! This is a topic of interest for me, so I look forward to seeing
your next post on HN with your V2 product :)

------
p0cc
How does this compare to similar products in this space?

I'm thinking of diagramming tools that are based on text, like Graphviz,
Mermaid, PlantUML, and Webgraphviz.

~~~
hugozap
My main motivation with diagram.codes is to provide a set of _very_ simple
DSL's so non technical users can use it to create diagrams for easy concept
visualization in tutorials, papers, etc. ( Non technical target audience means
having minimal configuration options or syntax that can be confusing)

Besides the tipical uml/graph/tree categories I'll be adding different ways of
visualizing concepts and relations. Things like
[https://www.diagram.codes/d/onion-layers](https://www.diagram.codes/d/onion-
layers),
[https://www.diagram.codes/d/stack](https://www.diagram.codes/d/stack) and
other experiments not yet published.

I've used most of the tools you listed and there's some overlap in
functionality. Maximum flexibility is not my goal (simplicity is) so I'd still
use them if a high degree of customization is required.

~~~
29athrowaway
The syntax for a graphviz digraph is almost the same to the one used in this
product.

~~~
hugozap
Yep, for graphs that's an already intuitive syntax and a starting point. Other
non graph based diagrams use different ones.

------
hugozap
Hi, I'm the creator of the tool, thanks a lot for the feedback, for those
interested in getting updates you can follow
[https://twitter.com/DiagramCodes](https://twitter.com/DiagramCodes), thanks.

~~~
gtirloni
Great tool! Positioning things in diagrams is my #1 complain.

Do you have any plans to enable diagrams for things like network
infrastructure? Custom icons maybe?

~~~
hugozap
Thanks! Yes, currently evaluating custom integration with platforms like
nounproject. Infrastructure diagrams are also coming soon, it's been a common
request.

------
masukomi
Am i right in thinking this thing is NOT open source?

With SO many great open source tools that do this why would i choose a
proprietary one that may go away at any point?

------
spinupol
How does this compare with [https://github.com/mermaid-
js/mermaid](https://github.com/mermaid-js/mermaid)

~~~
suyash
Mermaid seems to be way too good, thanks for sharing, adopting it now for my
blogs :)

------
jredwards
This is massively appealing to me if it can be made to accommodate a little
bit of color and visual design. Sankeymatic is a similar tool that seems to
have gotten this right.

As a visual learner who loves to diagram things, I've spent what seems like
years of my life being disappointed by visio, draw.io, powerpoint, and the
like. Honestly, for a straightforward, clean diagram, my favorite is still
Google Draw, mostly because it handles connectors incredibly well.

~~~
hugozap
It's an early version but I promise the visual quality will be much better in
next releases.

I'm also a visual learner but don't enjoy re arranging diagrams with drag &
drop ui's and basically that's what drove me to build it.

------
lukebennett
There are a lot of DSL-driven diagramming tools out there, but most produce
functional diagrams rather than visually appealing ones. Whilst these are fine
for many use cases, there are plenty of others where the look is too dated,
and something more modern is needed.

I'd love to see a DSL-driven tool emerge that has a real focus on design and
the visual quality of its output, producing something along the lines of
Whimsical[0] for example.

[0]
[https://whimsical.com/P53PjXCBWEi2fdMjP2Hti](https://whimsical.com/P53PjXCBWEi2fdMjP2Hti)

~~~
seanmcdirmid
Graphviz has been the gold standard of visually appealing graph layouts for a
couple of decades now. Frankly, it seems that it was the most successful
output from AT&T/Bell labs since C++.

A lot of programs that do anything with graphs have graphviz backends simply
for debugging.

------
kyrra
For sequence diagrams, I've used this a bit:

[https://bramp.github.io/js-sequence-diagrams/](https://bramp.github.io/js-
sequence-diagrams/)

The nice thing is you can add the JavaScript as a renderer on your page and
have svg sequence diagrams rather easily.

------
tra3
I love it. Especially since the dsl is so readable. It’s like like markdown or
orgmode or latex. The ease of authoring is paramount for me; being able to
produce beautiful rendering is a huge bonus in terms of delivery and being
able to get a different perspective on the content I’m reviewing. Well done!

~~~
hugozap
Thanks for the feedback, the dsl's are kept simple (sacrificing customization
flexibility) so non-technical users can benefit from it. Visual quality of the
output has lots of room for improvement, so that's what we'll be working on
next.

------
BiteCode_dev
I also like draw.io.

Yes, it's not text based, but it has such a cool hack: it saves the xml
reprensentation of the diagram inside the png. So you can publish it anywhere
as a regular png, and still edit it !

~~~
hugozap
It's a great tool, I've used it too. I don't see them as competing as
motivation may be different, both can export SVG and could be a complement.

~~~
BiteCode_dev
Indeed, they are not competitors. Just for git integration alone, having a
text based diagram is great.

------
lilyball
I'd love to see a diagram type that produces Git commit graphs (either top-to-
bottom or left-to-right).

~~~
cben
Mermaid recently added this, still "experimental": [https://mermaid-
js.github.io/mermaid/#/README?id=git-graph-e...](https://mermaid-
js.github.io/mermaid/#/README?id=git-graph-experimental)

But I want more control — name the commits "A", "M" instead of random hash,
free-form messages near commits, etc...

------
ragerino
I recommend taking a look at
[https://sequencediagram.org/](https://sequencediagram.org/)

I've been using it in various projects, since it only requires a small text
file and only a web browser to view those diagrams.

Would be awesome if this diagrams could make it into Markdown.

------
goodasa
I personally have used Typora(mermaid) to draw diagrams for my research. Is it
far different from Typora??

~~~
hugozap
I'd say it's a similar motivation, we'll keep adding different types of
diagrams, and ways to represent timelines, dialogs and more so the tool will
be a complement to what's already out there.

------
dgellow
Is it a live editor for PlantUML? [http://plantuml.com](http://plantuml.com)
The language and output looks similar.

~~~
hugozap
They belong to the same category but the diagram.codes engine and editor were
created from zero.

------
rmetzler
Does anyone have a good DSL tool for diagrams showing services exposing ports
and connecting to other services and ports? Maybe even showing hosts, docker
containers, networks and firewalls?

This is something that I tend to draw a lot at work, but it's always ad hoc
and doesn't follow any formal specification. I tried some tools but keep
coming back to doing it my way in ASCII with asciiflow.com or Google Docs
drawings.

~~~
hugozap
Hi, I'm the creator of the tool, if possible could you share an example of how
do they look with me? This sounds like an interesting diagram to include .
(hugo at volarelabs.co) Thanks.

------
nnnnnande
Seems like it could be an improvement on
[https://swimlanes.io/](https://swimlanes.io/) (the fact that you can choose
the type of diagram).

------
andrey_utkin
Seems like a trivial preprocessor of Graphviz's DOT syntax.

~~~
hugozap
We plan to keep adding non graph based diagrams. DOT definitely is an
inspiration for the current graph. Engine was built from zero and its general
purpose, not only tree or graph based.

------
sedatk
code2flow already does that, albeit for flowcharts only.
[https://code2flow.com/](https://code2flow.com/)

------
emrehan
I really like this. It provides value as it is. If I were to build this, I’d
focus on marketing and not try to monetize or have big expectations for 3+
years.

~~~
hugozap
Thanks for the feedback and the suggestions. We are looking into options to
support long term development of the platform.

------
mpurham
This is great! If this could somehow allow me to create UML diagrams I can see
this becoming a leading tool.

~~~
hugozap
UML diagrams coming soon!

------
SlowRobotAhead
So it’s websequencediagrams.org with more options.

Alright, I’ll try it. But I’ll echo that others have said, I’d like to see it
open source so I could take my designs to another site if this one goes away.

Also, the people comparing to draw.io, plantUML, and other actual programs I
don’t think get the lightweight fast sketch idea here.

------
sys_64738
draw.io

~~~
anonytrary
Draw.io is okay, but it would be even better if you could quickly generate
diagrams with markup rather than having to drag, drop and connect every single
node in your diagram. 9/10 times, I use paper and pencil because draw.io is
too tedious. I would rather have a tool like OP's or a tool where I can take a
snapshot of my hand-drawn chart, and have it automatically converted to a
digital layout with some sort of ML.

