5 ms·
Diagram.codes
- p0cc 7y agoHow 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 7y agoMy 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 7y agoThe syntax for a graphviz digraph is almost the same to the one used in this product.
- hugozap 7y agoYep, for graphs that's an already intuitive syntax and a starting point. Other non graph based diagrams use different ones.
- marktangotango 7y agoWhat evidence do you have non technical users are looking for this capability?
- hugozap 7y agoJust initial feedback from non technical users. Curiously technical users have expressed their interest in using it too for the potential time savings and their familiarity with text editors. It's an exploration at this point.
- goodasa 7y agoI personally have used Typora(mermaid) to draw diagrams for my research. Is it far different from Typora??
- hugozap 7y agoI'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.
- deleted 7y ago[deleted]
- lukebennett 7y agoThere 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
- hugozap 7y agoI plan to get help from a designer to improve the look and feel of the output diagrams, thanks for the feedback.
- seanmcdirmid 7y agoGraphviz 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.
- jredwards 7y agoThis 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 7y agoIt'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.
- tra3 7y agoI 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 7y agoThanks 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.
- masukomi 7y agoAm 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?
- sys_64738 7y agodraw.io
- hugozap 7y agoThat's a great tool, our approach is text based for users that prefer to describe the diagrams and let the tool automatically deal with the layout (instead of manually arranging elements using drag & drop GUI's). https://twitter.com/DiagramCodes/status/1197549164411916288 https://twitter.com/DiagramCodes/status/1197549164411916288
- anonytrary 7y agoDraw.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.
- hugozap 7y agoHi, 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 7y agoGreat 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 7y agoThanks! Yes, currently evaluating custom integration with platforms like nounproject. Infrastructure diagrams are also coming soon, it's been a common request.
- kyrra 7y agoFor 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.
- anonytrary 7y agoI 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 7y agoWow 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 7y agoNo problem! This is a topic of interest for me, so I look forward to seeing your next post on HN with your V2 product :)
- lilyball 7y agoI'd love to see a diagram type that produces Git commit graphs (either top-to-bottom or left-to-right).
- cben 7y agoMermaid recently added this, still "experimental": https://mermaid-js.github.io/mermaid/#/README?id=git-graph-experimental https://mermaid-js.github.io/mermaid/#/README?id=git-graph-e... But I want more control — name the commits "A", "M" instead of random hash, free-form messages near commits, etc...
- rmetzler 7y agoDoes 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.
- nnnnnande 7y agoSeems like it could be an improvement on https://swimlanes.io/ https://swimlanes.io/ (the fact that you can choose the type of diagram).
- dgellow 7y agoIs it a live editor for PlantUML? http://plantuml.com http://plantuml.com The language and output looks similar.
- hugozap 7y agoThey belong to the same category but the diagram.codes engine and editor were created from zero.
- andrey_utkin 7y agoSeems like a trivial preprocessor of Graphviz's DOT syntax.
- hugozap 7y agoWe 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.
- ragerino 7y agoI 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.
- emrehan 7y agoI 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 7y agoThanks for the feedback and the suggestions. We are looking into options to support long term development of the platform.
- spinupol 7y agoHow does this compare with https://github.com/mermaid-js/mermaid https://github.com/mermaid-js/mermaid
- BiteCode_dev 7y agoI 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 7y agoIt'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 7y agoIndeed, they are not competitors. Just for git integration alone, having a text based diagram is great.
- sedatk 7y agocode2flow already does that, albeit for flowcharts only. https://code2flow.com/ https://code2flow.com/
- mpurham 7y agoThis is great! If this could somehow allow me to create UML diagrams I can see this becoming a leading tool.
- hugozap 7y agoUML diagrams coming soon!
- SlowRobotAhead 7y agoSo 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.