This is one of the nicest browser-based drawing tools I've seen. While I can't see it replacing Inkscape for most of my work, the ability to edit the mxGraph markup is super cool, along with the SVG export option.
Cute. Spent a bit of time trying to figure out how to get an arrow: It's not obvious that you need to drag to get an arrow object, because if you just click without dragging, all the other objects will create a new instance at top left. I started out assuming that the UI would be select the object, then click to make a new instance where you wanted it. So, once an object appeared, I thought the intended UI was, click to get object, move it to where you wanted. I think you need to either not create a new object unless the user does drag, so they understand that something more is required (which is how visio seems to do it) or make 'new instance at top left' work for all objects.
'Cute' is the right word for this -- it lacks basic functionality. I've been using http://www.lucidchart.com for a while which is an amazing browser-based experience.
The UI for arrows was hard to figure out for a few minutes, but once I did I found it to be the right experience. Drag into space, you get an arrow to the same shape; drag to another shape, you get and arrow to that shape. That feels nice.
I think there's a bug here, maybe only some people are seeing it.
You're describing the UI for drawing/connecting the lines (optionally with arrows) which is very nice. What's strange is that every other shape if you click on it produced an item in the top left which you can drag to the required position and size. But, at least for me, the lines don't do this, you need to drag from the palette onto the screen then drag the ends onto boxes or where you want them. Seems strange to me.
It's great that you're just dropped into the editor, but when you actually cook up a quick little diagram there's nowhere to go but 'Export to' > 'Save to disk' > 'Open Twitter' > 'Upload & share' ...
This is the easiest and best way I've ever found to draw electrical circuits. Oh my god. So much components. I'm shaking in happiness for all the time I won't have to waste trying to fight inkscape & friends. (Not even mentioning latex packages to do this)
(Note: I'm a developer of CircuitLab.) It used to surprise me to see just how common it was for people to use general-purpose drawing/diagramming tools for electronics. In fact, Inkscape plus copy+paste is the de-facto schematic tool of choice for the Wikipedia project: https://en.wikipedia.org/wiki/Wikipedia:WikiProject_Electron... ! Nothing against Inkscape -- in fact, Inkscape is what we use to prepare symbols for insertion into CircuitLab -- but it really says something about how painful a lot of electronics-specific software must be that users will jump to general purpose vector drawing tools instead.
Feature request: hold down the space bar to get a drag cursor that moves the whole workspace around. (And ideally also hold spacebar + cmd to get a zoom in cursor, spacebar + option for a zoom our cursor.) These controls are used by every Adobe app (and have been widely adopted by other drawing/graphics software) and they’re amazingly useful, because they make it lightning fast to alternate between moving around the canvas and doing whatever else.
We've currently got Ctrl+Drag (or Cmd+Drag on OS X) for panning around the workspace, and the mouse wheel up/down is mapped to zooming in/out. (Probably need to better document these somewhere!) Compatibility with other keyboard/mouse conventions is something I will pass on to the UI team.
Agree about "amazingly useful ... lightning fast" to switch between modes -- we just added a keyboard shortcut for re-running the last simulation, just so we could eliminate the burden of explicit mode switching between schematic capture and simulation.
Interesting. There's no Facebook 'like' button, but there are Google Plus and Twitter social networking widgets. Is this some kind of a transparent statement or a rebellious move against Facebook as a non technical target audience? ;]
Neither of us that write diagramly have a facebook account, although we do sometimes wish we had one so every person we know could invite us to take their "10 questions about your rabbit" quiz. We're too old and out of date to use this modern technology, it just gets us flustered.
I love diagram.ly. I use it all the time to create sitemaps and flow diagrams. My only complaint is that exporting diagrams doesnt always product the result you wanted the first time, but it usually just takes some setting tweaks to get it right.
- If you want flowcharts use jsPlumb + jQuery UI. jQuery to drag elements on to the diagram div and jsPlumb to connect them.
You can achieve almost every thing what ever is being done here. I have used it personally to create something very similar. jsPlumb is MIT License, so you don't have worry about any thing.
I like this! I tried to bookmark it with Cmd+D, and noticed you trapped that keyboard event for the duplicate function. It might be better to use shift instead of meta to avoid colliding with copy, paste, etc.
69 comments
[ 3.8 ms ] story [ 133 ms ] threadI've used SimpleDiagrams as well in the past, but unfortunately its a Adobe Air desktop app and won't run on Ubuntu.
http://www.gliffy.com/
You're describing the UI for drawing/connecting the lines (optionally with arrows) which is very nice. What's strange is that every other shape if you click on it produced an item in the top left which you can drag to the required position and size. But, at least for me, the lines don't do this, you need to drag from the palette onto the screen then drag the ends onto boxes or where you want them. Seems strange to me.
May lack some sharing functionality but some really neat objects available and really easy to user.
It's great that you're just dropped into the editor, but when you actually cook up a quick little diagram there's nowhere to go but 'Export to' > 'Save to disk' > 'Open Twitter' > 'Upload & share' ...
if you define 'painful' to be 'under powered, needlessly complex, and over priced.' then yes.
Single biggest feature asked for an NEVER delivered, 'solid way to export a schematic to web-useful format' (PNG, GIF, JPG, or SVG).
Agree about "amazingly useful ... lightning fast" to switch between modes -- we just added a keyboard shortcut for re-running the last simulation, just so we could eliminate the burden of explicit mode switching between schematic capture and simulation.
Obviously this is a missing component in Google Docs (and even done in the same spirit). Good chance Google will acquire this... or build their own.
- If you want to connect divs use jsPlumb.
- If you want flowcharts use jsPlumb + jQuery UI. jQuery to drag elements on to the diagram div and jsPlumb to connect them.
You can achieve almost every thing what ever is being done here. I have used it personally to create something very similar. jsPlumb is MIT License, so you don't have worry about any thing.
We are also in private alpha for GoJS (gojs.net), which is the same library ported to HTML5 Canvas.
If you are interested in seeing GoJS once it is released as a more public alpha or beta please email me (see profile)
http://www.jgraph.com/mxgraph.html
..And it exports in almost every format that matters. I'll definitely be using this next time I need to put a diagram together.