
Show HN: Vecta.io - Team diagramming with an advanced SVG editor - pzht
https://vecta.io
======
WhitneyLand
\- 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.

~~~
moomooc
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 ');

~~~
RandyRanderson
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](https://vecta.io/js/jspdf.debug.js) -KoI4H-rmhQDnC4k4U3X:234 GET [https://vecta.io/js/jspdf.debug.js](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>

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

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

[http://imgur.com/a/dUKjq](http://imgur.com/a/dUKjq)

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

------
gexla
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.

~~~
chii
> 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...

~~~
arethuza
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.

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

------
biztos
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.

~~~
tomyip
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.

------
lars_francke
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.

~~~
moomooc
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!
:)

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

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

------
RubenSandwich
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.

~~~
moomooc
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.

~~~
RubenSandwich
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.

~~~
pzht
Hey Ruben, it's up now! Just a temporary fix.
[https://youtu.be/qUw1daqFmEM](https://youtu.be/qUw1daqFmEM)

------
interstedSurfer
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?

~~~
tomyip
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.

~~~
alalonde
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/](https://convergencelabs.com/demos/)

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

------
franciscop
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](https://stackoverflow.com/a/20471268/938236)

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

~~~
tomyip
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.

------
skibz
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.

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

------
weego
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.

~~~
tomyip
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.

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

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

~~~
abuani
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)

~~~
pzht
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

~~~
abuani
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 :)

~~~
moomooc
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.

~~~
abuani
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?

~~~
moomooc
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!

------
moomooc
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

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

------
bleair
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).

~~~
pzht
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 :)

------
thangngoc89
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

~~~
tomyip
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

------
mrlinx
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.

~~~
pzht
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! :)

------
have_faith
Demo wouldn't load (Chrome 59 MacOS).

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

~~~
tomyip
TQ, remedied will look into it further.

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

~~~
moomooc
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?

------
stephenr
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.

~~~
tomyip
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 :)

~~~
robertcope
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.

~~~
WhitneyLand
>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.

------
holychiz
Feature request: Jira integration (atlassian marketplace)

~~~
moomooc
Yup. It's in our plans! :)

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

~~~
pzht
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.

------
bsmith89
Feature request: side-scrolling without pressing shift.

~~~
tomyip
Thanks for the feedback, will surely look into it.

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

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

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

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

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

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

~~~
pzht
Ok will look into it, thanks!

