TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Diagram.codes

243 pointsby hugozapover 5 years ago

22 comments

anonytraryover 5 years ago
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.<p>Your value proposition is that the user doesn&#x27;t have to think about positioning and other stuff. This is a great optimization for <i>certain</i> use-cases, but it will definitely diminish your addressable market. Many diagramming use-cases need the additional customization that positioning provides.<p>One might think there&#x27;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.<p>There are a couple ways to solve this problem. The layout output from your algorithm should instead be an ansatz. You present the &quot;suggested&quot; layout for a given declaration, then let the user fine-tine the positioning if they need to for their use-case.<p>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.
评论 #21621202 未加载
p0ccover 5 years ago
How does this compare to similar products in this space?<p>I&#x27;m thinking of diagramming tools that are based on text, like Graphviz, Mermaid, PlantUML, and Webgraphviz.
评论 #21617567 未加载
hugozapover 5 years ago
Hi, I&#x27;m the creator of the tool, thanks a lot for the feedback, for those interested in getting updates you can follow <a href="https:&#x2F;&#x2F;twitter.com&#x2F;DiagramCodes" rel="nofollow">https:&#x2F;&#x2F;twitter.com&#x2F;DiagramCodes</a>, thanks.
评论 #21620667 未加载
masukomiover 5 years ago
Am i right in thinking this thing is NOT open source?<p>With SO many great open source tools that do this why would i choose a proprietary one that may go away at any point?
spinupolover 5 years ago
How does this compare with <a href="https:&#x2F;&#x2F;github.com&#x2F;mermaid-js&#x2F;mermaid" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;mermaid-js&#x2F;mermaid</a>
评论 #21622314 未加载
评论 #21620658 未加载
jredwardsover 5 years ago
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.<p>As a visual learner who loves to diagram things, I&#x27;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.
评论 #21618328 未加载
lukebennettover 5 years ago
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.<p>I&#x27;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.<p>[0] <a href="https:&#x2F;&#x2F;whimsical.com&#x2F;P53PjXCBWEi2fdMjP2Hti" rel="nofollow">https:&#x2F;&#x2F;whimsical.com&#x2F;P53PjXCBWEi2fdMjP2Hti</a>
评论 #21618073 未加载
评论 #21618017 未加载
kyrraover 5 years ago
For sequence diagrams, I&#x27;ve used this a bit:<p><a href="https:&#x2F;&#x2F;bramp.github.io&#x2F;js-sequence-diagrams&#x2F;" rel="nofollow">https:&#x2F;&#x2F;bramp.github.io&#x2F;js-sequence-diagrams&#x2F;</a><p>The nice thing is you can add the JavaScript as a renderer on your page and have svg sequence diagrams rather easily.
tra3over 5 years ago
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!
评论 #21618374 未加载
BiteCode_devover 5 years ago
I also like draw.io.<p>Yes, it&#x27;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 !
评论 #21621303 未加载
lilyballover 5 years ago
I&#x27;d love to see a diagram type that produces Git commit graphs (either top-to-bottom or left-to-right).
评论 #21700747 未加载
ragerinoover 5 years ago
I recommend taking a look at <a href="https:&#x2F;&#x2F;sequencediagram.org&#x2F;" rel="nofollow">https:&#x2F;&#x2F;sequencediagram.org&#x2F;</a><p>I&#x27;ve been using it in various projects, since it only requires a small text file and only a web browser to view those diagrams.<p>Would be awesome if this diagrams could make it into Markdown.
goodasaover 5 years ago
I personally have used Typora(mermaid) to draw diagrams for my research. Is it far different from Typora??
评论 #21618055 未加载
dgellowover 5 years ago
Is it a live editor for PlantUML? <a href="http:&#x2F;&#x2F;plantuml.com" rel="nofollow">http:&#x2F;&#x2F;plantuml.com</a> The language and output looks similar.
评论 #21619163 未加载
rmetzlerover 5 years ago
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?<p>This is something that I tend to draw a lot at work, but it&#x27;s always ad hoc and doesn&#x27;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.
评论 #21619178 未加载
评论 #21620951 未加载
nnnnnandeover 5 years ago
Seems like it could be an improvement on <a href="https:&#x2F;&#x2F;swimlanes.io&#x2F;" rel="nofollow">https:&#x2F;&#x2F;swimlanes.io&#x2F;</a> (the fact that you can choose the type of diagram).
andrey_utkinover 5 years ago
Seems like a trivial preprocessor of Graphviz&#x27;s DOT syntax.
评论 #21621334 未加载
sedatkover 5 years ago
code2flow already does that, albeit for flowcharts only. <a href="https:&#x2F;&#x2F;code2flow.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;code2flow.com&#x2F;</a>
emrehanover 5 years ago
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.
评论 #21623828 未加载
mpurhamover 5 years ago
This is great! If this could somehow allow me to create UML diagrams I can see this becoming a leading tool.
评论 #21622321 未加载
SlowRobotAheadover 5 years ago
So it’s websequencediagrams.org with more options.<p>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.<p>Also, the people comparing to draw.io, plantUML, and other actual programs I don’t think get the lightweight fast sketch idea here.
sys_64738over 5 years ago
draw.io
评论 #21619405 未加载
评论 #21618442 未加载