Drawing on canvas

Hey there.

As I told the team already, the ability to draw directly in Coda, simple shapes, text boxes and arrows, would be fantastic.
What do you think of it?

9 Likes

@tomavatars I would use that a bunch, especially for onboarding documents. A flowchart or web chart system would be cool to have as well—I’m a very visual thinker!

4 Likes

@chris_homburger @tomavatars If I need to make a graphic of some sort I do so using other tools - photoshop, sketch, illustrator, etc. Coda’s main functionality is found in their tables - so it seems to me that distracting from that would be detrimental. This seems especially the case considering there is such an easy way to drop images into Coda. You can just save and drag-and-drop or, even easier, just screenshot and paste it in.

Unless there is some sort of coda-esque spin on drawing that is very native to the experience, I think it could distract from the core functionality

2 Likes

@cnr , what I need can’t rely on imported images. I work very often with mind maps or draws, some boxes with text input and arrows to connect them, for game design purposes or brainstorming.

If I would work on software like Photoshop to create those images, I would lose a big amount of time to update informations on the original file then reimport it. It just can’t work this way.

What I do for the moment is creating Google draw or Milanote files and I use the magical embed formula (truly amazing feature).
But so far, Milanote doesn’t work with embed and the same original statement that I have too much documents spreaded over the cloud occurs again. It works well, but it’s not the perfect solution.

Simple draw with text input would then be awesome! There is already a rectangle shape formula but it lacks text input. Even if there would be text input in the formula it wouldn’t be simple to type the text into the formula. So draw on canvas is the solution for me.

Concerning the focus on the tables and a more complex way to use draw, if you have a look at the nice Zenkit tool, they are making a great way to handle mindmaps based on tables data. I would love this in Coda.

1 Like

Ohhh, interesting. So you’re talking about drawings that could be dependent on data stored in the tables. Hmm, yeah that could be useful. Let me check out those other tools that you’re talking about so I can get a better idea

2 Likes

Dependent if you need it to be. If the features are there, so it’s the best of both world!

3 Likes

I would love to have the team feedback on this topic :hugs:

2 Likes

@tomavatars Thank you for introducing Google Draw. What is magical embed formula? I am new to coda and need to understand.

@Qamar_Aftab I believe the formula is embed()
Have a look at the formula help to find all the Coda formulas and descriptions.
The embed would be to be like embed(“http://adress”,0,0,true) of I can remember well.
The true is for forcing the content to display.

@tomavatars I too am 100% trying to solve for the same use case. Just a note for what its worth that using embed with excalidraw is a somewhat positive experience. I had to create a few workarounds for various scenarios - Excalidraw has some live collaboration features as well as a unique approach to document saving via url data, and these things are a little clunky to leverage from a coda environment - but it is a somewhat helpful capability to be able to map something in Excalidraw, drop the export url into a table alongside some metadata columns for search utility and then have an embed formula source that URL for inline visual review when needed.

@cnr Wanted to reflect and build on your comment, as I think it is a really thoughtful perspective - and spurs a lot of deep thought. I’ve tried to write this up for others who may be also exploring these themes - such as my peers in the system’s design community. I’ve made a separate suggestion box ticket for this here:

Can (and should) visual thinking be supported in Coda to facilitate use cases for strategic intelligence in system and application design?

TL;DR on my thoughts:

  1. The Coda product teams interaction UX vision may benefit from considering the domain of visual deliberation to unlock the doc creation potential of users. I’ll present some context and case for this and note that it can include both data driven and interaction driven visualization.
  2. I agree that there are some very interesting use cases for specifically data driven visual thinking capability in Coda. I’ll share an example of MVP experiment I explored some time ago.

Feel free to click the link for a deep dive :slight_smile:

4 Likes

several people indicated here they like the suggestion, but im the only one to vote for it?
would love to see a few more votes for this; wont ensure it gets done, but will at least give an indication that its something we would like

max

1 Like

Thanks for noting that! On it!

I really think that adding Excalidraw intergration would be a huge setup for Coda. Coda is currently very good with text / data / images but lacking creative input.

Advantages of Excalidraw

  • Opensource, has NPM package < Easy to intergrate
  • Simple UI, fits super nicely with Coda
  • Excalidraw files are plain text which will make it easy for coda team to save in the backend.

If one looks at a perfect example of excalidraw intergration, look how it works with the note taking app obsidian, it is mindblowing how well it intergrates and what doors it opens.

3 Likes

Hi Riekus! I would recommend looking into the Mermaid Pack on Coda. it allows you to create diagrams and visualizations directly into Coda.

Thanks, I am aware of the Mermaid pack, but use case is different then excalidraw. With the right intergration.

@Riekus_Ritskes and other posters…

i am planning to attempt to develop a solution for this use-case as part of the upcoming ‘Packathon’.

my idea is to have a formula on the canvas (or in a table) that brings up an SVG editor (not sure if i can embed excalidraw, but i do have javascript code for something similar) and you can draw with pens, brushes, shapes etc. and it then returns the resulting SVG graphic as an image.

the challenge is that a regular Coda Pack runs on the coda servers, so cannot access the browser’s canvas graphics or your mouse pointer etc. but it can convert a string of data from your drawing strokes into an image using an SVG library.

so i am experimenting with a client-side javascript engine (like codepen or suchlike) for the drawing part, and a regular Coda Pack to return the SVG image object that resides in your document.

but (once again) i must say that what we REALLY need is a built-in drawing facility inside the coda product.

imagine being able to draw in a miro-like interface but have the objects in your diagram come from and be saved to tables in coda.

the mermaid pack is great, but its only one-way.

so, hopefully i can mush together something interesting as part of the ‘packathon’ next month.

Max

3 Likes

so i didnt get my drawing pack done in time for the packathon

but now with @Bill_French’s ITSY pack, i can take a whole new approach to this.

ITSY basically allows us to create client-side interactive packs.

yay!

3 Likes

Hi, did you make progress on the pack that integrates Excalidraw? I feel there is a compelling set of use cases for simple markup / annotate inside Coda. For example, I would like to mark up technical illustrations, which I import as image files (png, jpeg, svg/pdf, whatever).

Dear @Josh_Glazer,

I have tried myself, but you should be able just to embed the Excalidraw page in your Coda doc.

You just share the project, like you would do when collaborating with others on your drawing and embed the link in your doc, while granting access

Enjoy drawing on the canvas

Because you’re mentioning a pack, please could you elaborate on your use case and final goal.

Maybe a pack maker wizard will be able to help you out

I rely on of the more tech-savvy guys among you to build a drawing which can live in a column per row. This would definitely be a huge win for handwritten notes, signature collection, etc.

There are packs and there are options to embed, but a simple drawing even without fancy features would be quite nice to have (and unblock 10+ business cases which I can’t use Coda for).

1 Like