How can I make all Canvas connection lines straight instead of curved?

Help
1

I’m currently working on a project in Obsidian Canvas and I would really prefer if all connection lines between nodes were straight (linear) rather than the default curved style.

like this lines

image
image1531×697 62 KB

My questions are
Is there a global setting or plugin that can make all Canvas edges straight by default?
Can we add a right-click menu option to toggle the shape of individual lines between curved and straight?
Is there a CSS trick or snippet to force all connection lines to appear straight?

2

I haven’t come across any CSS options for adjusting the lines (there may be, of course).

There aren’t that many Canvas related community plugins; I’d try a few of them and report back.

3

I m waiting your report, by the way thx for your concern

4

“I’d try…” is “I would try…”, a suggestion for you to try out any Canvas community plugins that are out there.

5

i already tried to search, i found some plugins but they are for optimizing. Moreover i tried to write some custom css but it didn’t work. technically this canvas connections are vectoral paths, if i try the same thing in any vectoral draw application,i think this css would work. I guess these class names are changed or diffirent.

i was tried these css codes

.canvas .canvas-connection path {
  d: path("M0,0 L1,1") !important;
}

.canvas .canvas-connection path {
  stroke-linecap: square;
  stroke-dasharray: 0;
  stroke: var(--canvas-connection-color);
}

.canvas .canvas-connection path {
  stroke-linecap: square;
  stroke-dasharray: 0;
  shape-rendering: geometricPrecision;
}
6

Advanced Canvas is probably what you want.

1 Like
7

sorry man, not even close. This plugin works fine but it’s not what I want. :frowning_face: what I want is the shape of the existing lines to be curved right now, what I want is vertical lines with hard corners

8

Do you mean like this?

Screenshot from 2025-04-17 14-23-01
Screenshot from 2025-04-17 14-23-011504×891 48 KB

2 Likes
9

Have you examined your Canvas with Obsidian’s Developer Tools? On my machine it looks like this:

path
path577×447 68.7 KB

Maybe this helps you write a CSS snippet, that serves your purpose.

11

exactly like that, i wanna do that

12

It’s from Advanced Canvas plugin. You can get it from “Community plugins”.

  • After being enabled, you can change the line shape by clicking on it, it would be a menu.
  • Click the icon at the right corner of the menu.
  • Select which shape you want.

If you want to set a default line shape:

  • Go to “Advanced Canvas” settings.
  • Go to “Edges styling” section (actually, the connector lines of Obsidian canvas are known as “Edges”)
  • Open “Default edge style attributes”, select “Pathfinding Method”.

This video gives a better explanation.

13

Thank you for being my savior when I was about to go crazy.