Hacker News new | past | comments | ask | show | jobs | submit login
Show HN: Vecta.io - Team diagramming with an advanced SVG editor (vecta.io)
154 points by pzht on July 3, 2017 | hide | past | favorite | 83 comments



- First impression is impressive. Clearly a large amount of work and engineering effort invested that ended up in a powerful product. Well done.

- You need a damn video on your home page! Many click and try products don't need this. But here the collaboration aspect simply has no chance to fully shine and show it's true potential in 60 seconds without a short demo video.

- An API / Plugin option would be great to see, as would an embeddable version. Understand this may not fit your priorities / business model.

- Why no iOS or Surface support? Seems like iPad Pro, with or without pen, would be a great fit and not require a huge amount of development to make it happen. The work needed for this would also enable Surface Pro to work as a touch/pen experience. iPad Pro and Surface Pro combined have a significant amount of corporate users > revenue potential.


1. Thanks, and thanks again. Blood, sweat, and tears. But you've just made it worth it. 2. Video: Coming up next! Stay tuned :) 3. API: It's in fact in our plan too, will reply you in detailed tomorrow (Our devs are asleep by now, time difference prob sry) 4. iOS/ Surface: Yup, will be heading there but only after our current web version is stable and good to go. Thanks for suggesting tho :)


Thank you very much. We worked really hard to get Vecta up to this stage. Your feedback meant a lot to us. Now about that API option, we do have plans and it is actually... already built in! We have plans of opening it up soon, but here's a little something you can do in your browser's JS developer console. Try typing in Vecta.

The namespace 'Vecta' allows you to access the page or shapes in your active drawing. Vecta.activePage.shapes returns you an array of shapes in your current drawing. You can try setting the color to the first shape with a simple line like this: Vecta.activePage.shapes(0).style('fill', '#ff0000 ');


Signed up and created a new doc in latest chrome with ad blockers disabled. Stuck at "Loading" throbber with js console err:

-KoI4H-rmhQDnC4k4U3X:234 GET https://vecta.io/js/jspdf.debug.js -KoI4H-rmhQDnC4k4U3X:234 GET https://vecta.io/js/jspdf.debug.js 404 () objects.3f4dc78a27.js:3 Uncaught (in promise) TypeError: Cannot read property 'width' of undefined at Vecta.Document.insertPage (objects.3f4dc78a27.js:3) at Object.callback (objects.3f4dc78a27.js:3) at fire.afed4e0fe2.js:1 at <anonymous>


Sorry for the error, we're looking into it. Please allow us to buy some time.


Hi Randy, we've just fixed the error, could you please retry it at your end?


Hey Whitney, video's up! :) https://youtu.be/qUw1daqFmEM


I would disable the open demo, i was greeted by this on your homepage ;)

http://imgur.com/a/dUKjq


Really sorry for the unexpected "welcome note" on the open demo, we'll be improving on the demo process :)


I drew a penis, and next thing you know a cartoon fist appeared, and did a remarkably convincing job of animating it by rapidly re-placing the hand.

The internet is a wonderful thing


you might expect more maturity from hn, but at least its working.


Product demo should probably be specific to your session. It's great to be able to try it. But unmoderated user content front and center on your main page doesn't work so well.

ETA: More specifically, there was a lot of flashing of offensive text.


> Product demo should probably be specific to your session.

i agree, make it a per-user demo. THere's so much in the demo document on the front page that it lags and prevents scrolling...


At the moment the shared demo is pretty much unusable due to people deleting stuff before you can do anything with it.

Which is a shame as it actually looks like a pretty nice tool.


Please do try creating a free account where you can edit your own drawings and easily share them.


Will be fixing it next up, thanks for the feedback.


Great suggestion, we'll do so soon, thanks!


I like the idea -- this is something I would use and pay for if it were good enough.

Advice, in addition to all the other advice here:

- Connector line routing needs to be good (currently it doesn't really work) and if it were great then that would be a huge selling point.

- You should consider including a ton of "Cloud" (AWS, Azure, Google) symbols and icons out of the box. There are crappy ones available free from Amazon, that would be a start at least. I think "cloud architecture" is one of the biggest use-case for diagramming software right now.

- Not sure if you're using SVG as the native format but if not, consider it. The main reason I didn't upgrade to the new OmniGraffle was its so-so SVG support. Imagine a use-case where people collaborate on a drawing and then store the result in Git, maybe do some batch editing elsewhere, then need to get it back for more visual editing.

- If you want to get traction in the Enterprise world (the horror!) then you probably need a Confluence plug-in at some point.


Thanks biztos, absolutely agreed on connectors and we are now improving it as we speak.

-Cloud icons are already there and so is a load of web applications icons, click on the menu icon to the right of stencil to access it.

- We are using SVG format as it has wide spread adoption and does not lock our users in.

- Confluence integration, coming up real soon.

Thanks for pointing these out.


Looks very nice. Looking forward to what's coming.

I tried to share a document via mail, clicked on "Get Share Link" and allowed public access and then closed the window with "Ok". I'm still asked to log in. When I click on Share again my share link is gone. So this doesn't seem to work currently.


Thank you very much for the feedback. We'll work on improving the share dialog. If you notice anything amiss with the UI, please don't hesitate to reply. It's feedbacks like this that makes the team eager to get things done! :)


I am surprised no one mentioned SVG-edit, which is open-source: https://github.com/SVG-Edit/svgedit


Oh we weren't aware, thanks for telling. But we're hopeful to do more than that rather than just simply svg editing :)


Great job on this. One thing I'd do is replace the demo on the homepage with a video and a link to a demo. Why?

The demo slows down the web page, especially on mobile. So put it behind a deliberate action. That way you can also make the demo full screen instead of rendering it 75% of its normal size.

Edit: That way it's also clearer that when someone is using the demo to post swear words, like what is happening now, it isn't on your main page.


Thanks for the input! We just thought that it's a great idea to let visitors try out the product immediately on the landing page. We'll look into improving the whole demo process.


I think a video would better communicate your product then a demo would. Why? Because people don't have time to figure out all of your features, give me a short one min introduction with important features. Now I'm not saying remove the demo, but the demo is for after they are interested and want to evaluate your claims.


Hey Ruben, it's up now! Just a temporary fix. https://youtu.be/qUw1daqFmEM


True, gona start planning it out! Appreciate your comment much :)


Recently, I evaluated different JS drawing tools and libraries.

Its very cool that your web app does not clog the whole CPU like similar tools. Can you tell a little bit about the technology stack. Feel freeto skip questions if they are too invasive.

1. Do you use a drawing library or is this in house?

2. Do you store the SVG-objects as JS-objects?

3. If (3), how do represent the SVG-objects? (I looked into hyperscript).

4. If (3), how do you render the JS-object version to SVG in the DOM and update them? Do you use something like React, i.e. 'render' the whole thing to a VDOM and then update changes in dom for each update, or do you bind each SVG object to its JS object via an Observer?

4. A drawing app has obvouisly many states like UserCanSelectObjectByClick, UserClickedFirstPoint, UserMovesRectangle. Do you use state machines, generators, or sagas to implement these flows?

6. Do you use Websockets? Which library would you suggest? (A classical choice would be socket.io, but it is relatively heavyweigh).

7. Do you somehow abstract the mouse-events with jquery or d3? Any plans to support touch?

8. What happens if two users modify the same object?


1. We tried drawing libraries before using something in house. In fact what we have now is actually the 3rd version, where we throw away 2 previous versions that is not working as well as we would like. 2. We do not store SVG objects as JS object as we think that will be too memory intensive on a browser. What we have are wrappers, that will take SVG and wrap it internally as objects and to have a consistent and easy way to manipulate them, and once done working with them we throw them away. For example, we have wrappers for rectangle and ellipse and they both uses .move(x,y) and .size(width, height) which is more consistent than using SVG which requires x, y, width, height for rects and cx, cy, rx, ry for ellipses.

In addition, we have plans for opening up our API, so that people like yourself can build solutions on top of Vecta, right now you can play with it programmatically by opening your console, and typing Vecta. This single namespace allow you to access the page or shapes, Vecta.activePage.shapes, or you can set color to the first shape with Vecta.activePage.shapes(0).style('fill', '#ff0000');

4. We use document fragments to render to shadow DOM and write it to DOM, using in house code. However, we have found that what really matters is not so much of speed offered by rendering to shadown DOM but instead of the calculations we have to make internally like making sure the center of rotation and the tight bounding box. These, due to the inability of browsers to calculate them accurately, we have to make.

5. No, we rely on DOM and classes and wanted to keep things simple, so we have objects that handle the handles (no pun intended).

6. We use firebase. It not only handles our collaborative editing well but also allow us to generate previews, smooth and easy login, upload to storage, etc. We love firebase!

7. We do abstract mouse events, key events and many others with internal objects. These objects provide more information, like which shape the user has clicked on and therefore makes the entire task of handling the editing far easier, and we use JQuery for it's ease of use and cross browser compatibility.

8. There is no such thing as 2 users modify the same object at the same time, as one is always slower than the other. The slowest one wins. Say, I drag the object right and you drag it left, if you do it later, then the object is gonna go left.

Hopes that helps! Thanks for asking.


Thank you for the technical details. Probably a bit late for you guys, but we offer a BaaS tailor-made for this sort of product. For instance you could add multiple mouse tracking and selection awareness in a matter of hours with our APIs. Check out our diagram demo for a taste: https://convergencelabs.com/demos/


Amazing! Will surely be keeping an out out for you guys as our requirements may change.


Really quick question since it looks quite similar (but might just be coincidence), did you happen to use this for the right click context menu?

https://stackoverflow.com/a/20471268/938236

Just asking because it's my answer and I'd be really happy to see someone using it!


No, we use our own code plus some triangulation to predict user's mouse direction so that the menu will not hide if we detect a user heading that direction. Your answer is great by the way.


Great app, thanks for building this - I plan on using this with my team at work immediately.

The only problem I had with the app was during registration. I decided to use my Google account to register, and upon successful redirect back to the app via OAuth callback, I was prompted to click a button to create a new user account instead of being logged into the app.

I found this confusing because I expected the step of generating my user account to be automated in the OAuth callback. There was also a heading on the page that was something like 'No Account Found', which added to my confusion as the OAuth process was supposed to (I expected, at least) create the account record.


Thanks a million, will double check on the flow to ensure no confusion and smooth flow. TQ!


It's interesting. Is this a product that solves a particular problem you've found in the past? Or a product trying to find a market.

I don't wish to sound negative, it's a genuine query because I really can't think of a single instance in the past when this would have solved a problem for me, but I wonder if there's niches I've not been exposed to.


This is a product that we are trying to solve a particular problem we are facing. How do we easily create amazing diagrams that is accurate and share them easily with our customers. How do we collaborate with others and be able to easily show what we meant. How do we built automation on top of it, so that it will help us count things, generate reports, etc. etc. So there, this is actually a first step where we have a few more things we wanna do down the line.


I signed up and tried creating a new diagram, but it's been stuck on the "loading" screen for several minutes now.


We've just tried on our side, works fine. Was it still the same after refreshing?


I'm having the same issue. Appologies for the lack of formatting, let me know if I can hop on a chat to help out further.

Following console errors:

Failed to load resource: net::ERR_BLOCKED_BY_CLIENT www.facebook.com/impression.php/fcb4620c12f5dc/?api_key=1598145426866140&lid=115&payload=%7B%22source%22%3A%22jssdk%22%7D Failed to load resource: net::ERR_BLOCKED_BY_CLIENT www.facebook.com/tr/?id=1598145426866140&ev=fb_page_view&dl=https%3A%2F%2Fv…=https%3A%2F%2Fvecta.io%2Fapp%2Fdashboard&if=false&ts=1499106496718&es=APP Failed to load resource: net::ERR_BLOCKED_BY_CLIENT objects.d347593dbb.js:3 Uncaught (in promise) TypeError: Cannot read property 'width' of undefined at Vecta.Document.insertPage (objects.d347593dbb.js:3) at Object.callback (objects.d347593dbb.js:3) at fire.36207b0522.js:1 at <anonymous> ui.f6e4c67621.js:2 Uncaught TypeError: Cannot set property 'font_style' of undefined at Object.setFontStyle (ui.f6e4c67621.js:2) at ui.f6e4c67621.js:3 at dispatch (jquery.min.js:3) at q.handle (jquery.min.js:3) at Object.trigger (jquery.min.js:4) at jquery.min.js:4 at Function.each (jquery.min.js:2) at r.fn.init.each (jquery.min.js:2) at r.fn.init.trigger (jquery.min.js:4) at Object.Vecta.trigger (utils.1a5acb0310.js:1)


Many apologies, may we get back to you in 4 hours or so? Our devs are all asleep now (huge time difference), and I'm afraid I can't help much :/ Really sorry, I'll ensure it is fixed in max 5 hours' time


Not a problem! How can I reach out via email? I'd be glad to assist when everyone's available. And since it's beta, don't worry about getting me a time back, as long as I can get the developers some info we're cool :)


Hey abuani. I can't seem to replicate this bug you spoke of. Please feel free to get back to us whenever you can on this bug.


Hey I am SO sorry! I had a bit of a crazy week and totally forgot about this. Let me see if it's all good now and I'll get back.

Edit: Can confirm: All good :) In the future, I'll make sure to post a bug in the official spot now that I know where it's at!

How has the week been? Have you seen sustained activity?


No worries brah. Yay! Great that it's fine now. The week has been crazy by the way. Increased traffic, people taking notice of our work. It's a great week. We're really happy for the feedbacks we've been receiving. Enjoy your stay in Vecta!


Million thanks! Perhaps you could submit the issue here: https://support.vecta.io/hc/en-us/requests/new We'll get back to you from there :)


Hey HN folks! We've added stencils on the demo page. We created the symbols using Vecta. Give our stencils a try! Here's the direct link to the demo page.

vecta.io/app/edit/demo


SHORT DEMO VIDEO FOR VECTA: https://youtu.be/qUw1daqFmEM A temporary one for now. Thanks to WitneyLand & RubenSandwich for suggesting! :)


This looks most promising. I've always longed for an online collaborative version of OMNI graffle (they have such nice gradients and document themes and their UX almost always does what you want).


Thanks! We were also looking for alternatives previously before started building Vecta, but none fits the bill. Atm we gona polish Vecta up and ensure it's as good as what our users expected or even better :)


Great products. But your header bar in frontpage has a transparent background. It's great for the hero section but completely unusable in the content section. Add some background to it


Will absolutely double check on this one, and we did add a white background to and but will sure check why it does not work as well as we would like. Thanks a million for the feedback


Great app, really.

What I would really like woube be 1) an API 2) ability to sync with dropbox.

My team has about a dozen diagrams in out Git repository, so I'd really like a faster way of exporting vecta->folder.


Well received, will work on it up next. Please do allow us to buy some time, we're a small team of 5. Thanks a lot for the inputs and kind words! :)


Demo wouldn't load (Chrome 59 MacOS).

  objects.685ed2904d.js:1 Uncaught (in promise) TypeError: Cannot read property 'type' of null


TQ, remedied will look into it further.


Please allow login and email verification after I have logged in. it took me extra few steps. thanx


Hey there, I believe the whole process does have email verification, depending on which login you use. Can you explain a bit further on this?


No pricing, doesn't appear to be open source, so why would I rely on this?

Too many SaaS apps go the way of the dodo these days - if I can't run it myself it's going to be a hard sell, and if you can't make a case that you're profitable, I'm not gonna take a risk on your flash in the pan project.


Thanks for the feedback. It's in beta now, and pricing is still in the works as we strive to provide value yet offer an affordable pricing. As the company behind Vecta, we have been profitable for a long time and has been making CAD software, for a while, and so we won't be going away anytime soon, well, at least that's the plan :)


I think those are the same words every new business ever have said.

You need to address pricing, even if it is stating that we're not sure yet. As it is, it looks like you just want to avoid the topic.

Also, assure me that my diagrams can be exported, backed up locally, etc. Maybe a github integration or something similar? Anything that lets me know I'm not locked in. I won't allow my data to be locked in.


>same words every new business ever have said

No.

Being backed by a longer term profitable entity that has related tech, is definitely not what most new SaaS vendors say. It's not a guarantee but it's a legit plus.

SaaS startup promises and unsustainable offers are a real and serious concern. But when a product is just getting launched, still in beta, there's nothing wrong with them taking some time to figure out the parameters.

The very thing you are demanding makes it prudent for companies to do everything they can to get pricing and promises right.


Thanks for raising your concern to us, but we're by no means trying to avoid the topic as we're like what you said, not too certain of the pricing yet. We're pro to freemium model atm. Rest assured, we'll ensure your data won't be locked in and is well integrated with other platforms. Thanks for helping us to improve on our users' experience, we'll work hard on that :)


It's not a new business. Please reread the comment you're replying to.


>doesn't appear to be open source, so why would I rely on this?

Because there is no open source project as good? Or was that rhetorical?

Historically OSS content creation hasn't been as competitive with commercial offerings as other categories of software. Does Gimp compare to Photoshop nearly as well as Linux compares to Windows Server? Would love for a serious benefactor to help OSS content creation in general.

If you do know anything that looks as good as Vectra please throw out a link.


The rest of my comment does explain the logic:

If a SaaS app is closed source, like this one appears to be, if it closes (e.g. if they're acquired, decide its not profitable enough, lose interest, etc) I have no options. Maybe I can get my data out, but then what?

If a SaaS app is open source, and the paid version is essentially paying for the service of it being hosted, I have no concerns: if they close for whatever reason, I can run (or pay someone to run) the open source software.

> If you do know anything that looks as good as Vectra please throw out a link.

I haven't tried it, but I'd imagine the recent(ish) browser-based LibreOffice Online might be usable for the same purpose?


We're hopeful our export to SVG feature would have provide LOTS of options to use desktop software or other online SaaS to have continued access to your work. In these days and age, SaaS players must be open especially so with their file formats, and since we want to work well with other platforms, but not reinventing the wheel, we opt for SVG file format, so it can continue to work well with others for many years to come. Hope it clears your doubts :)


Same comment. The first thing I do is look for pricing. If I cannot find it or it was clearly made hard to find, I move on. Looks like a neat tool, but I'm not bothering to make an account.


Feature request: Jira integration (atlassian marketplace)


Yup. It's in our plans! :)


It's awesome that you can try the product on the landing page.


Yea, we think it makes more sense that way. Almost all features available on landing page aside from symbols & stencils and some team features. Thanks for checking us out btw.


Feature request: side-scrolling without pressing shift.


Thanks for the feedback, will surely look into it.


Why does the homepage repeatedly show 'c*nt'?


I suppose it's because that is a live collaborative demo with no spam protection. Very unfortunate.


Someone seems to be playing with the demo in a not so nice way.


Yea, we overlooked this part when putting up the demo page. Will be remedying it real soon. TQ


It looks quite impressive, but a bit on the slow side.


We'll have a check on that. Thanks for telling!


Pop-up for Single sign-on logins will loose you visitors. Consider putting that in a workflow in-page instead.


Ok will look into it, thanks!




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: