[HN Gopher] Diagrams: Open-Source Alternative to Lucidchart
___________________________________________________________________
 
Diagrams: Open-Source Alternative to Lucidchart
 
Author : synergy20
Score  : 165 points
Date   : 2022-03-23 16:22 UTC (6 hours ago)
 
web link (www.diagrams.net)
w3m dump (www.diagrams.net)
 
| spellcard199 wrote:
| I 'm an heavy user of diagrams to take notes while learning
| topics in biology and medicine. I think the most interesting
| feature of diagrams.net is its extensibility, which is not
| frequently mentioned. If you run in the javascript console...
| var editorUi;         Draw.loadPlugin(app => editorUi = app)
| var editor = editorUi.editor         var graph = editor.graph
| 
| ... then you can automate changes to the diagram using mxGraph's
| api [1] on the `graph' variable from the console.
| 
| Around this plugin mechanism I wrote some dirty hacks for
| personal use to make the editor behave more to my likings [2]
| (some features stopped working with recent versions of the
| desktop app), and an even dirtier Emacs mode for editing labels
| and having the js REPL available directly from Emacs when I need
| to run some code to fix my diagrams programmatically [3] (based
| on Indium [4] + the fact that electron apps can be launched with
| --remote-debugging-port=...). It's not pretty, but works enough
| for me, and it's only thanks to the customizability that
| diagrams.net allows.
| 
| [1] https://jgraph.github.io/mxgraph/docs/js-
| api/files/view/mxGr...
| 
| [2] https://gitlab.com/spellcard199/drawio-plugin-eight-
| droves-o...
| 
| [3] https://gitlab.com/spellcard199/emacs-drawio
| 
| [4] https://github.com/NicolasPetton/Indium
 
| Veuxdo wrote:
| Diagrams is a great drag-and-drop tool, but drag-and-drop tools
| shouldn't be used for serious system diagramming:
| https://www.ilograph.com/blog/posts/its-time-to-drop-drag-an...
 
  | abraae wrote:
  | We opted for Mermaid (mentioned in your article) and auto-
  | layout in our new offering.
  | 
  | As you would expect, it has its pros and its cons. As diagrams
  | get bigger and more complex, mermaid's auto-layout gets more
  | and more challenged and more and more acres of white space
  | start to appear. Of course drawing those same large diagrams
  | manually would be a bitch too.
  | 
  | At small scale, auto-layout is a no-brainer, but the jury is
  | still out for us on large, real world diagrams.
 
    | alexott wrote:
    | I like PlantUML a lot
 
    | lmc wrote:
    | Take a look at Structurizr - https://structurizr.com/
    | 
    | The guy that makes it is super helpful on twitter as well.
    | 
    | Ah, I've just realised, the article above pointed to a quote
    | by Simon Brown - he is the Structurizr guy :-)
 
      | abraae wrote:
      | Thanks for the link. All the examples look pretty simple
      | and only use straight line connectors. We're building a no-
      | code for HR platform, so the diagrams are large and really
      | need curved connectors to maximise use of the space.
 
  | mnahkies wrote:
  | I completely agree with the sentiment of that post.
  | 
  | I've generally always found it difficult to find something in
  | this space that produces a layout that's easy to follow, and
  | easy to experiment with.
  | 
  | I think I'd like something that had: - layout constraints
  | similar to the android relative layout - something like
  | excalidraw that could dump the hand drawn diagram out to code
  | for a bit of cleanup before going into VCS
  | 
  | I'm imagining you could solve the ability to inject new
  | sections with the constraints relatively easily but still
  | retain a good amount of creative control to better tell the
  | story.
  | 
  | Any suggestions for tools to checkout?
 
    | chrisweekly wrote:
    | It's a slight tangent but as an Obsidian user, the Obsidian-
    | Excalidraw plugin^1 is kind of jaw-droppingly, amazingly good
    | at combining the many things each tool does well into a
    | seamless, customizable UX.
    | 
    | 1. https://github.com/zsviczian/obsidian-excalidraw-plugin
 
  | wafer-bw wrote:
  | The way that article suggests adding more ELBs to the diagram
  | would take a lot of work with a drag and drop tool is
  | hilariously bad, maybe the author should learn how to use drag
  | and drop tools or maybe they are using terrible ones that don't
  | let you also drag to select?
 
  | dtjb wrote:
  | Different uses for different audiences. That article addresses
  | engineering use cases. But diagramming is also useful when
  | discussing (and constantly revising) concepts and workflows
  | with business users before any code is written. Drag and drop
  | fits the bill just fine there.
 
  | politician wrote:
  | It's sad that nothing beats OmniGraffle.
  | 
  | Ideally, I want diagrams-as-code with a supporting layout-as-
  | code document for fine-tuning the presentation and a wysiwyg
  | tool for manipulating that layout-as-code document.
  | 
  | But I understand why none of this exists: the MVP is too big.
 
| jotm wrote:
| Wow, this is... awesome!
| 
| I was looking for something like this for a while, OneNote works
| but it's quite tedious. Just a canvas for
| mindmaps/diagrams/ideas.
| 
| This is one of the reasons I keep coming here, to discover new,
| useful software. Google is rather bad for that these days.
| 
| Thank you very much!
| 
| I'll see if I can contribute anything.
 
| igetspam wrote:
| Is this supposed to be a clever way of announcing that draw.io
| has been renamed to diagrams.net?
 
  | dljsjr wrote:
  | They wanted to move off .io for several reasons, they announced
  | it a while back: https://www.diagrams.net/blog/move-diagrams-
  | net
 
    | IshKebab wrote:
    | Ha that complaint about British Imperialism is hilarious. The
    | British forced the original inhabitants off the island in the
    | colonial era, thus denying their descendants the right to
    | profit from an internet domain?? Madness.
 
      | davidjgraph wrote:
      | "Between 1967 and 1973, the Chagossians..."
      | (https://en.wikipedia.org/wiki/Chagossians). That's the
      | colonial era? They are plenty of Chagossians alive today
      | that were evicted.
 
| yboris wrote:
| Related: _yEd_ graph editor with my favorite feature: automatic
| diagram untangling  / re-arrangement / reflow.
| 
| https://www.yworks.com/products/yed
 
| argella wrote:
| My company is forcing everyone back to Visio from diagrams.net
| because "it's included with m365".
| 
| Shit deal.
 
| alpb wrote:
| Isn't this the well known https://draw.io rebranded?
 
  | csunbird wrote:
  | It definitely is!
 
  | synergy20 wrote:
  | it is, I especially like its offline desktop version(for all
  | OSes). I don't think Lucidchart has a desktop version.
  | 
  | and of course, it's totally free unless you want its paid
  | Apps+cloud version, which in my case I don't.
 
| dtjb wrote:
| I'm not affiliated but if anyone is looking for BPMN diagramming
| I've found cawemo.com to be the best option out there.
| Lightweight, simple, online, free, and can be used for downstream
| automation.
 
| jrvarela56 wrote:
| If you're looking for a simpler drawing tool
| https://www.tldraw.com lets you draw and associate all kinds of
| shapes.
 
| hnarn wrote:
| I thought this was about the Python module "diagrams".
 
| tgsovlerkhgsel wrote:
| This is how the example chart on their homepage looks on my
| machine: https://i.imgur.com/al67CoQ.png - ugly font, labels
| crossing their boxes.
| 
| I think they're sending me an SVG that my browser renders poorly,
| but that's a horrible first impression.
| 
| That said, the tool itself looks pretty solid, much better than
| the only other open source alternative I know (dia). Like many
| open source tools the UI design looks a bit old and it's chock
| full of advanced features that make the basic ones hard to
| find/use, but it's certainly usable.
| 
| And it's browser based, which means it runs anywhere, including
| Chromebooks.
 
| toastshaman wrote:
| This is also excellent. https://github.com/mingrammer/diagrams
 
| davidjgraph wrote:
| For those finding the UI too complex, there is the option of a
| simpler UI - https://app.diagrams.net/?splash=0&ui=sketch . That
| can be set under extras->theme->sketch.
 
| houqp wrote:
| I love the product, not only does it have an easy to use
| web/offline app, I am also able to checkin the diagram source
| into git for version control, see:
| https://github.com/roapi/docs/blob/main/src/images/roapi.dra....
| Then I can use automations to generate images based off that
| source file:
| https://github.com/roapi/docs/blob/main/src/images/roapi.svg.
 
  | the_arun wrote:
  | How can I share a link for the diagram with a friend/team
  | member & collaborate?
 
    | shagie wrote:
    | Depends on how its shared... but... if you pull up
    | https://app.diagrams.net
    | 
    | Do an 'Open from' > 'URL...' and paste in
    | http://shagie.net/wp-content/uploads/2015/05/Untitled-
    | Diagra... (an example diagram I made several years ago) - its
    | a png itself and you can open that up as a png, but I also
    | exported it with the drawing embedded.
    | 
    | So when you open that up in the app, you'll get the _drawing_
    | - not the raster version.
    | 
    | Also consider that I created that png _7 years ago_ - other
    | drawing document formats have been less stable over that
    | timeframe. I 'm quite impressed with it.
 
    | davidjgraph wrote:
    | Save it to Google Drive or OneDrive and share that with them.
 
  | stevesimmons wrote:
  | You can also save your drawings using the option that embeds
  | the drawio diagram source into the rendered svg or png file,
  | and check that single file into git.
  | 
  | Then (a) no need for an automation to generate the image; (b)
  | any image or svg is directly editable.
 
  | thedougd wrote:
  | You can also embed the source into a png or svg and commit
  | those to the repo. Diagrams.net will allow you to open from the
  | source embedded png or svg.
 
| riidom wrote:
| You can also use it as a wireframing/prototyping tool, or as some
| kind of free-form typing tool. Write something about the topic at
| hand in a box, make a list of things in another box, draw some
| sketch with some basic shapes in a 3rd box, arrange it all later
| on so similar things are together, etc. And then export to pdf
| (or html, but I'm more familiar with the pdf export)
 
| 725686 wrote:
| "When companies pay us money it should be because we add value,
| not because they are locked in."
 
___________________________________________________________________
(page generated 2022-03-23 23:00 UTC)