Document and canvas¶

Doc¶

Doc ¶

Doc(
    width: float = 600.0,
    *,
    height: float | None = None,
    theme: Theme = DEFAULT,
    pad: float = 8.0,
)

A figure under construction.

width `instance-attribute` ¶

width = width

height `instance-attribute` ¶

height = height

theme `instance-attribute` ¶

theme = theme

pad `instance-attribute` ¶

pad = pad

title `instance-attribute` ¶

title = ''

description `instance-attribute` ¶

description = ''

blocks `instance-attribute` ¶

blocks: list[Block] = []

links `instance-attribute` ¶

links: list[_Link] = []

overlays `instance-attribute` ¶

overlays: list[_Overlay] = []

add ¶

add(*blocks: Block) -> Doc

Append blocks to the figure, top to bottom. Returns self, to chain.

describe ¶

describe(title: str, description: str = '') -> Doc

Give the figure an accessible name, emitted as and <desc>. </div> </div> <div class="doc doc-object doc-function"> <h4 id="svg_plus.doc.Doc.connect" class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> connect <a href="#svg_plus.doc.Doc.connect" class="headerlink" title="Permanent link">¶</a></h4> <div class="language-python doc-signature highlight"><pre><code><a id="__codelineno-0-1" name="__codelineno-0-1" href="#__codelineno-0-1"></a>connect( <a id="__codelineno-0-2" name="__codelineno-0-2" href="#__codelineno-0-2"></a> source: str, <a id="__codelineno-0-3" name="__codelineno-0-3" href="#__codelineno-0-3"></a> target: str, <a id="__codelineno-0-4" name="__codelineno-0-4" href="#__codelineno-0-4"></a> *, <a id="__codelineno-0-5" name="__codelineno-0-5" href="#__codelineno-0-5"></a> color: str = "muted", <a id="__codelineno-0-6" name="__codelineno-0-6" href="#__codelineno-0-6"></a> label: str = "", <a id="__codelineno-0-7" name="__codelineno-0-7" href="#__codelineno-0-7"></a> heads: str = "->", <a id="__codelineno-0-8" name="__codelineno-0-8" href="#__codelineno-0-8"></a> via: str = "", <a id="__codelineno-0-9" name="__codelineno-0-9" href="#__codelineno-0-9"></a>) -> <a class="autorefs autorefs-internal" title="<code class="doc-symbol doc-symbol-heading doc-symbol-class"></code> Doc" href="./#svg_plus.doc.Doc">Doc</a> </code></pre></div> <div class="doc doc-contents "> Draw an arrow between two named blocks, once both have been placed. <code>heads</code> is one of <code>-></code>, <code><-</code>, <code><-></code> or <code>--</code>. The route is chosen from where the boxes end up: straight when they line up on an axis, square-cornered when they do not. <code>via</code> overrides that and sends the arrow around one side of the figure — <code>left</code>, <code>right</code>, <code>top</code> or <code>bottom</code> — which is what a back-edge across several tiers wants. </div> </div> <div class="doc doc-object doc-function"> <h4 id="svg_plus.doc.Doc.overlay" class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> overlay <a href="#svg_plus.doc.Doc.overlay" class="headerlink" title="Permanent link">¶</a></h4> <div class="language-python doc-signature highlight"><pre><code><a id="__codelineno-0-1" name="__codelineno-0-1" href="#__codelineno-0-1"></a>overlay(block: <a class="autorefs autorefs-internal" title="<code class="doc-symbol doc-symbol-heading doc-symbol-class"></code> Block <code>dataclass</code> " href="../blocks/#svg_plus.blocks.Block">Block</a>, near: str, at: str = 'top-right') -> <a class="autorefs autorefs-internal" title="<code class="doc-symbol doc-symbol-heading doc-symbol-class"></code> Doc" href="./#svg_plus.doc.Doc">Doc</a> </code></pre></div> <div class="doc doc-contents "> Place a block against a named one, on top of everything else. A badge on a card, a note beside a box, a stamp in a corner — anything that sits outside the flow. The block is centred on the chosen point of the box it is placed against, and takes that box's width unless it declares one of its own. </div> </div> <div class="doc doc-object doc-function"> <h4 id="svg_plus.doc.Doc.build" class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> build <a href="#svg_plus.doc.Doc.build" class="headerlink" title="Permanent link">¶</a></h4> <div class="language-python doc-signature highlight"><pre><code><a id="__codelineno-0-1" name="__codelineno-0-1" href="#__codelineno-0-1"></a>build() -> <a class="autorefs autorefs-internal" title="<code class="doc-symbol doc-symbol-heading doc-symbol-class"></code> Canvas <code>dataclass</code> " href="./#svg_plus.canvas.Canvas">Canvas</a> </code></pre></div> <div class="doc doc-contents "> Measure, arrange and render, returning the canvas that was drawn on. </div> </div> <div class="doc doc-object doc-function"> <h4 id="svg_plus.doc.Doc.svg" class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> svg <a href="#svg_plus.doc.Doc.svg" class="headerlink" title="Permanent link">¶</a></h4> <div class="language-python doc-signature highlight"><pre><code><a id="__codelineno-0-1" name="__codelineno-0-1" href="#__codelineno-0-1"></a>svg() -> str </code></pre></div> <div class="doc doc-contents "> The figure as SVG markup, without writing anything to disk. </div> </div> <div class="doc doc-object doc-function"> <h4 id="svg_plus.doc.Doc.save" class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> save <a href="#svg_plus.doc.Doc.save" class="headerlink" title="Permanent link">¶</a></h4> <div class="language-python doc-signature highlight"><pre><code><a id="__codelineno-0-1" name="__codelineno-0-1" href="#__codelineno-0-1"></a>save(path: Path | str) -> Path </code></pre></div> <div class="doc doc-contents "> Write <code>.svg</code> directly, or <code>.pdf</code> / <code>.png</code> through svglib. </div> </div> </div> </div> </div><h2 id="canvas">Canvas<a class="headerlink" href="#canvas" title="Permanent link">¶</a></h2> <div class="doc doc-object doc-class"> <h3 id="svg_plus.canvas.Canvas" class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-class"></code> Canvas <code>dataclass</code> <a href="#svg_plus.canvas.Canvas" class="headerlink" title="Permanent link">¶</a></h3> <div class="language-python doc-signature highlight"><pre><code><a id="__codelineno-0-1" name="__codelineno-0-1" href="#__codelineno-0-1"></a>Canvas( <a id="__codelineno-0-2" name="__codelineno-0-2" href="#__codelineno-0-2"></a> width: float, <a id="__codelineno-0-3" name="__codelineno-0-3" href="#__codelineno-0-3"></a> height: float, <a id="__codelineno-0-4" name="__codelineno-0-4" href="#__codelineno-0-4"></a> theme: <a class="autorefs autorefs-internal" title="<code class="doc-symbol doc-symbol-heading doc-symbol-class"></code> Theme <code>dataclass</code> " href="../fonts/#svg_plus.theme.Theme">Theme</a> = <a class="autorefs autorefs-internal" title="<code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> DEFAULT <code>module-attribute</code> " href="../fonts/#svg_plus.theme.DEFAULT">DEFAULT</a>, <a id="__codelineno-0-5" name="__codelineno-0-5" href="#__codelineno-0-5"></a> parts: list[str] = list(), <a id="__codelineno-0-6" name="__codelineno-0-6" href="#__codelineno-0-6"></a> markers: dict[str, str] = dict(), <a id="__codelineno-0-7" name="__codelineno-0-7" href="#__codelineno-0-7"></a> rects: dict[str, <a class="autorefs autorefs-internal" title="<code class="doc-symbol doc-symbol-heading doc-symbol-class"></code> Rect <code>dataclass</code> " href="./#svg_plus.canvas.Rect">Rect</a>] = dict(), <a id="__codelineno-0-8" name="__codelineno-0-8" href="#__codelineno-0-8"></a> title: str = "", <a id="__codelineno-0-9" name="__codelineno-0-9" href="#__codelineno-0-9"></a> description: str = "", <a id="__codelineno-0-10" name="__codelineno-0-10" href="#__codelineno-0-10"></a>) </code></pre></div> <div class="doc doc-contents first"> <div class="doc doc-children"> <div class="doc doc-object doc-attribute"> <h4 id="svg_plus.canvas.Canvas.width" class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> width <code>instance-attribute</code> <a href="#svg_plus.canvas.Canvas.width" class="headerlink" title="Permanent link">¶</a></h4> <div class="language-python doc-signature highlight"><pre><code><a id="__codelineno-0-1" name="__codelineno-0-1" href="#__codelineno-0-1"></a>width: float </code></pre></div> <div class="doc doc-contents "> </div> </div> <div class="doc doc-object doc-attribute"> <h4 id="svg_plus.canvas.Canvas.height" class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> height <code>instance-attribute</code> <a href="#svg_plus.canvas.Canvas.height" class="headerlink" title="Permanent link">¶</a></h4> <div class="language-python doc-signature highlight"><pre><code><a id="__codelineno-0-1" name="__codelineno-0-1" href="#__codelineno-0-1"></a>height: float </code></pre></div> <div class="doc doc-contents "> </div> </div> <div class="doc doc-object doc-attribute"> <h4 id="svg_plus.canvas.Canvas.theme" class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> theme <code>class-attribute</code> <code>instance-attribute</code> <a href="#svg_plus.canvas.Canvas.theme" class="headerlink" title="Permanent link">¶</a></h4> <div class="language-python doc-signature highlight"><pre><code><a id="__codelineno-0-1" name="__codelineno-0-1" href="#__codelineno-0-1"></a>theme: <a class="autorefs autorefs-internal" title="<code class="doc-symbol doc-symbol-heading doc-symbol-class"></code> Theme <code>dataclass</code> " href="../fonts/#svg_plus.theme.Theme">Theme</a> = <a class="autorefs autorefs-internal" title="<code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> DEFAULT <code>module-attribute</code> " href="../fonts/#svg_plus.theme.DEFAULT">DEFAULT</a> </code></pre></div> <div class="doc doc-contents "> </div> </div> <div class="doc doc-object doc-attribute"> <h4 id="svg_plus.canvas.Canvas.parts" class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> parts <code>class-attribute</code> <code>instance-attribute</code> <a href="#svg_plus.canvas.Canvas.parts" class="headerlink" title="Permanent link">¶</a></h4> <div class="language-python doc-signature highlight"><pre><code><a id="__codelineno-0-1" name="__codelineno-0-1" href="#__codelineno-0-1"></a>parts: list[str] = field(default_factory=list) </code></pre></div> <div class="doc doc-contents "> </div> </div> <div class="doc doc-object doc-attribute"> <h4 id="svg_plus.canvas.Canvas.markers" class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> markers <code>class-attribute</code> <code>instance-attribute</code> <a href="#svg_plus.canvas.Canvas.markers" class="headerlink" title="Permanent link">¶</a></h4> <div class="language-python doc-signature highlight"><pre><code><a id="__codelineno-0-1" name="__codelineno-0-1" href="#__codelineno-0-1"></a>markers: dict[str, str] = field(default_factory=dict) </code></pre></div> <div class="doc doc-contents "> </div> </div> <div class="doc doc-object doc-attribute"> <h4 id="svg_plus.canvas.Canvas.rects" class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> rects <code>class-attribute</code> <code>instance-attribute</code> <a href="#svg_plus.canvas.Canvas.rects" class="headerlink" title="Permanent link">¶</a></h4> <div class="language-python doc-signature highlight"><pre><code><a id="__codelineno-0-1" name="__codelineno-0-1" href="#__codelineno-0-1"></a>rects: dict[str, <a class="autorefs autorefs-internal" title="<code class="doc-symbol doc-symbol-heading doc-symbol-class"></code> Rect <code>dataclass</code> " href="./#svg_plus.canvas.Rect">Rect</a>] = field(default_factory=dict) </code></pre></div> <div class="doc doc-contents "> </div> </div> <div class="doc doc-object doc-attribute"> <h4 id="svg_plus.canvas.Canvas.title" class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> title <code>class-attribute</code> <code>instance-attribute</code> <a href="#svg_plus.canvas.Canvas.title" class="headerlink" title="Permanent link">¶</a></h4> <div class="language-python doc-signature highlight"><pre><code><a id="__codelineno-0-1" name="__codelineno-0-1" href="#__codelineno-0-1"></a>title: str = '' </code></pre></div> <div class="doc doc-contents "> </div> </div> <div class="doc doc-object doc-attribute"> <h4 id="svg_plus.canvas.Canvas.description" class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> description <code>class-attribute</code> <code>instance-attribute</code> <a href="#svg_plus.canvas.Canvas.description" class="headerlink" title="Permanent link">¶</a></h4> <div class="language-python doc-signature highlight"><pre><code><a id="__codelineno-0-1" name="__codelineno-0-1" href="#__codelineno-0-1"></a>description: str = '' </code></pre></div> <div class="doc doc-contents "> </div> </div> <div class="doc doc-object doc-function"> <h4 id="svg_plus.canvas.Canvas.rect" class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> rect <a href="#svg_plus.canvas.Canvas.rect" class="headerlink" title="Permanent link">¶</a></h4> <div class="language-python doc-signature highlight"><pre><code><a id="__codelineno-0-1" name="__codelineno-0-1" href="#__codelineno-0-1"></a>rect( <a id="__codelineno-0-2" name="__codelineno-0-2" href="#__codelineno-0-2"></a> box: <a class="autorefs autorefs-internal" title="<code class="doc-symbol doc-symbol-heading doc-symbol-class"></code> Rect <code>dataclass</code> " href="./#svg_plus.canvas.Rect">Rect</a>, <a id="__codelineno-0-3" name="__codelineno-0-3" href="#__codelineno-0-3"></a> *, <a id="__codelineno-0-4" name="__codelineno-0-4" href="#__codelineno-0-4"></a> fill: str = "none", <a id="__codelineno-0-5" name="__codelineno-0-5" href="#__codelineno-0-5"></a> stroke: str = "none", <a id="__codelineno-0-6" name="__codelineno-0-6" href="#__codelineno-0-6"></a> radius: float = 0.0, <a id="__codelineno-0-7" name="__codelineno-0-7" href="#__codelineno-0-7"></a> stroke_width: float = 1.0, <a id="__codelineno-0-8" name="__codelineno-0-8" href="#__codelineno-0-8"></a>) -> None </code></pre></div> <div class="doc doc-contents "> A rectangle filling <code>box</code>, with an optional corner radius. </div> </div> <div class="doc doc-object doc-function"> <h4 id="svg_plus.canvas.Canvas.text" class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> text <a href="#svg_plus.canvas.Canvas.text" class="headerlink" title="Permanent link">¶</a></h4> <div class="language-python doc-signature highlight"><pre><code><a id="__codelineno-0-1" name="__codelineno-0-1" href="#__codelineno-0-1"></a>text( <a id="__codelineno-0-2" name="__codelineno-0-2" href="#__codelineno-0-2"></a> x: float, y: float, content: str, style: <a class="autorefs autorefs-internal" title="<code class="doc-symbol doc-symbol-heading doc-symbol-class"></code> TextStyle <code>dataclass</code> " href="../fonts/#svg_plus.fonts.TextStyle">TextStyle</a>, anchor: str = "start" <a id="__codelineno-0-3" name="__codelineno-0-3" href="#__codelineno-0-3"></a>) -> None </code></pre></div> <div class="doc doc-contents "> One run of text on one baseline. <code>x</code> is the anchor, not the left edge. </div> </div> <div class="doc doc-object doc-function"> <h4 id="svg_plus.canvas.Canvas.line" class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> line <a href="#svg_plus.canvas.Canvas.line" class="headerlink" title="Permanent link">¶</a></h4> <div class="language-python doc-signature highlight"><pre><code><a id="__codelineno-0-1" name="__codelineno-0-1" href="#__codelineno-0-1"></a>line( <a id="__codelineno-0-2" name="__codelineno-0-2" href="#__codelineno-0-2"></a> start: tuple[float, float], <a id="__codelineno-0-3" name="__codelineno-0-3" href="#__codelineno-0-3"></a> end: tuple[float, float], <a id="__codelineno-0-4" name="__codelineno-0-4" href="#__codelineno-0-4"></a> *, <a id="__codelineno-0-5" name="__codelineno-0-5" href="#__codelineno-0-5"></a> stroke: str = "rule", <a id="__codelineno-0-6" name="__codelineno-0-6" href="#__codelineno-0-6"></a> stroke_width: float = 1.0, <a id="__codelineno-0-7" name="__codelineno-0-7" href="#__codelineno-0-7"></a> dash: str = "", <a id="__codelineno-0-8" name="__codelineno-0-8" href="#__codelineno-0-8"></a>) -> None </code></pre></div> <div class="doc doc-contents "> A straight line; <code>dash</code> takes an SVG dash pattern such as "4 3". </div> </div> <div class="doc doc-object doc-function"> <h4 id="svg_plus.canvas.Canvas.arrow" class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> arrow <a href="#svg_plus.canvas.Canvas.arrow" class="headerlink" title="Permanent link">¶</a></h4> <div class="language-python doc-signature highlight"><pre><code><a id="__codelineno-0-1" name="__codelineno-0-1" href="#__codelineno-0-1"></a>arrow( <a id="__codelineno-0-2" name="__codelineno-0-2" href="#__codelineno-0-2"></a> start: tuple[float, float], <a id="__codelineno-0-3" name="__codelineno-0-3" href="#__codelineno-0-3"></a> end: tuple[float, float], <a id="__codelineno-0-4" name="__codelineno-0-4" href="#__codelineno-0-4"></a> *, <a id="__codelineno-0-5" name="__codelineno-0-5" href="#__codelineno-0-5"></a> stroke: str = "muted", <a id="__codelineno-0-6" name="__codelineno-0-6" href="#__codelineno-0-6"></a> stroke_width: float = 1.4, <a id="__codelineno-0-7" name="__codelineno-0-7" href="#__codelineno-0-7"></a>) -> None </code></pre></div> <div class="doc doc-contents "> A line with an arrowhead at <code>end</code>. The marker is added once per colour. </div> </div> <div class="doc doc-object doc-function"> <h4 id="svg_plus.canvas.Canvas.circle" class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> circle <a href="#svg_plus.canvas.Canvas.circle" class="headerlink" title="Permanent link">¶</a></h4> <div class="language-python doc-signature highlight"><pre><code><a id="__codelineno-0-1" name="__codelineno-0-1" href="#__codelineno-0-1"></a>circle( <a id="__codelineno-0-2" name="__codelineno-0-2" href="#__codelineno-0-2"></a> cx: float, <a id="__codelineno-0-3" name="__codelineno-0-3" href="#__codelineno-0-3"></a> cy: float, <a id="__codelineno-0-4" name="__codelineno-0-4" href="#__codelineno-0-4"></a> radius: float, <a id="__codelineno-0-5" name="__codelineno-0-5" href="#__codelineno-0-5"></a> *, <a id="__codelineno-0-6" name="__codelineno-0-6" href="#__codelineno-0-6"></a> fill: str = "none", <a id="__codelineno-0-7" name="__codelineno-0-7" href="#__codelineno-0-7"></a> stroke: str = "none", <a id="__codelineno-0-8" name="__codelineno-0-8" href="#__codelineno-0-8"></a>) -> None </code></pre></div> <div class="doc doc-contents "> A circle centred on <code>cx</code>, <code>cy</code> — a bullet, a node, a status dot. </div> </div> <div class="doc doc-object doc-function"> <h4 id="svg_plus.canvas.Canvas.image" class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> image <a href="#svg_plus.canvas.Canvas.image" class="headerlink" title="Permanent link">¶</a></h4> <div class="language-python doc-signature highlight"><pre><code><a id="__codelineno-0-1" name="__codelineno-0-1" href="#__codelineno-0-1"></a>image(box: <a class="autorefs autorefs-internal" title="<code class="doc-symbol doc-symbol-heading doc-symbol-class"></code> Rect <code>dataclass</code> " href="./#svg_plus.canvas.Rect">Rect</a>, picture: <a class="autorefs autorefs-internal" title="<code class="doc-symbol doc-symbol-heading doc-symbol-class"></code> Picture <code>dataclass</code> " href="../fonts/#svg_plus.images.Picture">Picture</a>) -> None </code></pre></div> <div class="doc doc-contents "> An embedded picture, centred in <code>box</code> and keeping its proportions. </div> </div> <div class="doc doc-object doc-function"> <h4 id="svg_plus.canvas.Canvas.path" class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> path <a href="#svg_plus.canvas.Canvas.path" class="headerlink" title="Permanent link">¶</a></h4> <div class="language-python doc-signature highlight"><pre><code><a id="__codelineno-0-1" name="__codelineno-0-1" href="#__codelineno-0-1"></a>path( <a id="__codelineno-0-2" name="__codelineno-0-2" href="#__codelineno-0-2"></a> d: str, <a id="__codelineno-0-3" name="__codelineno-0-3" href="#__codelineno-0-3"></a> *, <a id="__codelineno-0-4" name="__codelineno-0-4" href="#__codelineno-0-4"></a> stroke: str = "none", <a id="__codelineno-0-5" name="__codelineno-0-5" href="#__codelineno-0-5"></a> stroke_width: float = 1.0, <a id="__codelineno-0-6" name="__codelineno-0-6" href="#__codelineno-0-6"></a> fill: str = "none", <a id="__codelineno-0-7" name="__codelineno-0-7" href="#__codelineno-0-7"></a>) -> None </code></pre></div> <div class="doc doc-contents "> A path. Connectors use it; a bend needs one element, not three. </div> </div> <div class="doc doc-object doc-function"> <h4 id="svg_plus.canvas.Canvas.connect" class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> connect <a href="#svg_plus.canvas.Canvas.connect" class="headerlink" title="Permanent link">¶</a></h4> <div class="language-python doc-signature highlight"><pre><code><a id="__codelineno-0-1" name="__codelineno-0-1" href="#__codelineno-0-1"></a>connect( <a id="__codelineno-0-2" name="__codelineno-0-2" href="#__codelineno-0-2"></a> source: <a class="autorefs autorefs-internal" title="<code class="doc-symbol doc-symbol-heading doc-symbol-class"></code> Rect <code>dataclass</code> " href="./#svg_plus.canvas.Rect">Rect</a>, <a id="__codelineno-0-3" name="__codelineno-0-3" href="#__codelineno-0-3"></a> target: <a class="autorefs autorefs-internal" title="<code class="doc-symbol doc-symbol-heading doc-symbol-class"></code> Rect <code>dataclass</code> " href="./#svg_plus.canvas.Rect">Rect</a>, <a id="__codelineno-0-4" name="__codelineno-0-4" href="#__codelineno-0-4"></a> *, <a id="__codelineno-0-5" name="__codelineno-0-5" href="#__codelineno-0-5"></a> stroke: str = "muted", <a id="__codelineno-0-6" name="__codelineno-0-6" href="#__codelineno-0-6"></a> label: str = "", <a id="__codelineno-0-7" name="__codelineno-0-7" href="#__codelineno-0-7"></a> heads: str = "->", <a id="__codelineno-0-8" name="__codelineno-0-8" href="#__codelineno-0-8"></a> via: str = "", <a id="__codelineno-0-9" name="__codelineno-0-9" href="#__codelineno-0-9"></a>) -> None </code></pre></div> <div class="doc doc-contents "> An arrow between two placed blocks, leaving from the facing edges. </div> </div> <div class="doc doc-object doc-function"> <h4 id="svg_plus.canvas.Canvas.label" class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> label <a href="#svg_plus.canvas.Canvas.label" class="headerlink" title="Permanent link">¶</a></h4> <div class="language-python doc-signature highlight"><pre><code><a id="__codelineno-0-1" name="__codelineno-0-1" href="#__codelineno-0-1"></a>label( <a id="__codelineno-0-2" name="__codelineno-0-2" href="#__codelineno-0-2"></a> start: tuple[float, float], <a id="__codelineno-0-3" name="__codelineno-0-3" href="#__codelineno-0-3"></a> end: tuple[float, float], <a id="__codelineno-0-4" name="__codelineno-0-4" href="#__codelineno-0-4"></a> text: str, <a id="__codelineno-0-5" name="__codelineno-0-5" href="#__codelineno-0-5"></a> *, <a id="__codelineno-0-6" name="__codelineno-0-6" href="#__codelineno-0-6"></a> stroke: str = "muted", <a id="__codelineno-0-7" name="__codelineno-0-7" href="#__codelineno-0-7"></a>) -> None </code></pre></div> <div class="doc doc-contents "> A word beside a connector — alongside the line, never across it. Set on the line and knocked out of it, a label covers whatever the line runs between as soon as the run is shorter than the word. Beside it, the worst case is that a long label reaches into its own gutter. It is always offset towards the middle of the figure, so a connector detouring along a margin does not push its label off the page. </div> </div> <div class="doc doc-object doc-function"> <h4 id="svg_plus.canvas.Canvas.to_svg" class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> to_svg <a href="#svg_plus.canvas.Canvas.to_svg" class="headerlink" title="Permanent link">¶</a></h4> <div class="language-python doc-signature highlight"><pre><code><a id="__codelineno-0-1" name="__codelineno-0-1" href="#__codelineno-0-1"></a>to_svg() -> str </code></pre></div> <div class="doc doc-contents "> The finished document, ready to write to a file. </div> </div> </div> </div> </div><h2 id="rect">Rect<a class="headerlink" href="#rect" title="Permanent link">¶</a></h2> <div class="doc doc-object doc-class"> <h3 id="svg_plus.canvas.Rect" class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-class"></code> Rect <code>dataclass</code> <a href="#svg_plus.canvas.Rect" class="headerlink" title="Permanent link">¶</a></h3> <div class="language-python doc-signature highlight"><pre><code><a id="__codelineno-0-1" name="__codelineno-0-1" href="#__codelineno-0-1"></a>Rect(x: float, y: float, w: float, h: float) </code></pre></div> <div class="doc doc-contents first"> <div class="doc doc-children"> <div class="doc doc-object doc-attribute"> <h4 id="svg_plus.canvas.Rect.x" class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> x <code>instance-attribute</code> <a href="#svg_plus.canvas.Rect.x" class="headerlink" title="Permanent link">¶</a></h4> <div class="language-python doc-signature highlight"><pre><code><a id="__codelineno-0-1" name="__codelineno-0-1" href="#__codelineno-0-1"></a>x: float </code></pre></div> <div class="doc doc-contents "> </div> </div> <div class="doc doc-object doc-attribute"> <h4 id="svg_plus.canvas.Rect.y" class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> y <code>instance-attribute</code> <a href="#svg_plus.canvas.Rect.y" class="headerlink" title="Permanent link">¶</a></h4> <div class="language-python doc-signature highlight"><pre><code><a id="__codelineno-0-1" name="__codelineno-0-1" href="#__codelineno-0-1"></a>y: float </code></pre></div> <div class="doc doc-contents "> </div> </div> <div class="doc doc-object doc-attribute"> <h4 id="svg_plus.canvas.Rect.w" class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> w <code>instance-attribute</code> <a href="#svg_plus.canvas.Rect.w" class="headerlink" title="Permanent link">¶</a></h4> <div class="language-python doc-signature highlight"><pre><code><a id="__codelineno-0-1" name="__codelineno-0-1" href="#__codelineno-0-1"></a>w: float </code></pre></div> <div class="doc doc-contents "> </div> </div> <div class="doc doc-object doc-attribute"> <h4 id="svg_plus.canvas.Rect.h" class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> h <code>instance-attribute</code> <a href="#svg_plus.canvas.Rect.h" class="headerlink" title="Permanent link">¶</a></h4> <div class="language-python doc-signature highlight"><pre><code><a id="__codelineno-0-1" name="__codelineno-0-1" href="#__codelineno-0-1"></a>h: float </code></pre></div> <div class="doc doc-contents "> </div> </div> <div class="doc doc-object doc-attribute"> <h4 id="svg_plus.canvas.Rect.right" class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> right <code>property</code> <a href="#svg_plus.canvas.Rect.right" class="headerlink" title="Permanent link">¶</a></h4> <div class="language-python doc-signature highlight"><pre><code><a id="__codelineno-0-1" name="__codelineno-0-1" href="#__codelineno-0-1"></a>right: float </code></pre></div> <div class="doc doc-contents "> </div> </div> <div class="doc doc-object doc-attribute"> <h4 id="svg_plus.canvas.Rect.bottom" class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> bottom <code>property</code> <a href="#svg_plus.canvas.Rect.bottom" class="headerlink" title="Permanent link">¶</a></h4> <div class="language-python doc-signature highlight"><pre><code><a id="__codelineno-0-1" name="__codelineno-0-1" href="#__codelineno-0-1"></a>bottom: float </code></pre></div> <div class="doc doc-contents "> </div> </div> <div class="doc doc-object doc-attribute"> <h4 id="svg_plus.canvas.Rect.cx" class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> cx <code>property</code> <a href="#svg_plus.canvas.Rect.cx" class="headerlink" title="Permanent link">¶</a></h4> <div class="language-python doc-signature highlight"><pre><code><a id="__codelineno-0-1" name="__codelineno-0-1" href="#__codelineno-0-1"></a>cx: float </code></pre></div> <div class="doc doc-contents "> </div> </div> <div class="doc doc-object doc-attribute"> <h4 id="svg_plus.canvas.Rect.cy" class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> cy <code>property</code> <a href="#svg_plus.canvas.Rect.cy" class="headerlink" title="Permanent link">¶</a></h4> <div class="language-python doc-signature highlight"><pre><code><a id="__codelineno-0-1" name="__codelineno-0-1" href="#__codelineno-0-1"></a>cy: float </code></pre></div> <div class="doc doc-contents "> </div> </div> <div class="doc doc-object doc-function"> <h4 id="svg_plus.canvas.Rect.inset" class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> inset <a href="#svg_plus.canvas.Rect.inset" class="headerlink" title="Permanent link">¶</a></h4> <div class="language-python doc-signature highlight"><pre><code><a id="__codelineno-0-1" name="__codelineno-0-1" href="#__codelineno-0-1"></a>inset(amount: float) -> <a class="autorefs autorefs-internal" title="<code class="doc-symbol doc-symbol-heading doc-symbol-class"></code> Rect <code>dataclass</code> " href="./#svg_plus.canvas.Rect">Rect</a> </code></pre></div> <div class="doc doc-contents "> The same rectangle pulled in by <code>amount</code> on every side. </div> </div> </div> </div> </div><h2 id="routing">Routing<a class="headerlink" href="#routing" title="Permanent link">¶</a></h2> <div class="doc doc-object doc-function"> <h3 id="svg_plus.canvas.route" class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-function"></code> route <a href="#svg_plus.canvas.route" class="headerlink" title="Permanent link">¶</a></h3> <div class="language-python doc-signature highlight"><pre><code><a id="__codelineno-0-1" name="__codelineno-0-1" href="#__codelineno-0-1"></a>route( <a id="__codelineno-0-2" name="__codelineno-0-2" href="#__codelineno-0-2"></a> source: <a class="autorefs autorefs-internal" title="<code class="doc-symbol doc-symbol-heading doc-symbol-class"></code> Rect <code>dataclass</code> " href="./#svg_plus.canvas.Rect">Rect</a>, target: <a class="autorefs autorefs-internal" title="<code class="doc-symbol doc-symbol-heading doc-symbol-class"></code> Rect <code>dataclass</code> " href="./#svg_plus.canvas.Rect">Rect</a>, via: str = "", bounds: <a class="autorefs autorefs-internal" title="<code class="doc-symbol doc-symbol-heading doc-symbol-class"></code> Rect <code>dataclass</code> " href="./#svg_plus.canvas.Rect">Rect</a> | None = None <a id="__codelineno-0-3" name="__codelineno-0-3" href="#__codelineno-0-3"></a>) -> list[tuple[float, float]] </code></pre></div> <div class="doc doc-contents first"> Where a connector runs between two placed boxes. Two points when the boxes line up on an axis; four when they do not, so the arrow turns square corners instead of cutting a diagonal across the figure. Diagonals are most of why a hand-laid diagram looks untidy. <code>via</code> overrides all of that and sends the connector out around one side — <code>left</code>, <code>right</code>, <code>top</code> or <code>bottom</code>. </div> </div> </article> </div> <script>var tabs=__md_get("__tabs");if(Array.isArray(tabs))e:for(var set of document.querySelectorAll(".tabbed-set")){var labels=set.querySelector(".tabbed-labels");for(var tab of tabs)for(var label of labels.getElementsByTagName("label"))if(label.innerText.trim()===tab){var input=document.getElementById(label.htmlFor);input.checked=!0;continue e}}</script> <script>var target=document.getElementById(location.hash.slice(1));target&&target.name&&(target.checked=target.name.startsWith("__tabbed_"))</script> </div> <button type="button" class="md-top md-icon" data-md-component="top" hidden> <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="lucide lucide-circle-arrow-up" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="m16 12-4-4-4 4M12 16V8"/></svg> Back to top </button> </main> <footer class="md-footer"> <div class="md-footer-meta md-typeset"> <div class="md-footer-meta__inner md-grid"> <div class="md-copyright"> <div class="md-copyright__highlight"> Copyright © 2026 Stefane Fermigier </div> Made with <a href="https://zensical.org/" target="_blank" rel="noopener"> Zensical </a> </div> <div class="md-social"> <a href="https://github.com/sfermigier/svg-plus" target="_blank" rel="noopener" title="github.com" class="md-social__link"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M216.5 362.5c-66-8-112.5-55.5-112.5-117 0-25 9-52 24-70-6.5-16.5-5.5-51.5 2-66 20-2.5 47 8 63 22.5 19-6 39-9 63.5-9s44.5 3 62.5 8.5c15.5-14 43-24.5 63-22 7 13.5 8 48.5 1.5 65.5 16 19 24.5 44.5 24.5 70.5 0 61.5-46.5 108-113.5 116.5 17 11 28.5 35 28.5 62.5v52c0 15 12.5 23.5 27.5 17.5C441 459.5 512 369 512 257 512 115.5 397 0 255.5 0S0 115.5 0 257c0 111 70.5 203 165.5 237.5 13.5 5 26.5-4 26.5-17.5v-40c-7 3-16 5-24 5-33 0-52.5-18-66.5-51.5-5.5-13.5-11.5-21.5-23-23-6-.5-8-3-8-6 0-6 10-10.5 20-10.5 14.5 0 27 9 40 27.5 10 14.5 20.5 21 33 21s20.5-4.5 32-16c8.5-8.5 15-16 21-21"/></svg> </a> <a href="https://pypi.org/project/svg-plus/" target="_blank" rel="noopener" title="pypi.org" class="md-social__link"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M439.8 200.5c-7.7-30.9-22.3-54.2-53.4-54.2h-40.1v47.4c0 36.8-31.2 67.8-66.8 67.8H172.7c-29.2 0-53.4 25-53.4 54.3v101.8c0 29 25.2 46 53.4 54.3 33.8 9.9 66.3 11.7 106.8 0 26.9-7.8 53.4-23.5 53.4-54.3v-40.7H226.2v-13.6h160.2c31.1 0 42.6-21.7 53.4-54.2 11.2-33.5 10.7-65.7 0-108.6M286.2 444.7a20.4 20.4 0 1 1 0-40.7 20.4 20.4 0 1 1 0 40.7M167.8 248.1h106.8c29.7 0 53.4-24.5 53.4-54.3V91.9c0-29-24.4-50.7-53.4-55.6-35.8-5.9-74.7-5.6-106.8.1-45.2 8-53.4 24.7-53.4 55.6v40.7h106.9v13.6h-147c-31.1 0-58.3 18.7-66.8 54.2-9.8 40.7-10.2 66.1 0 108.6 7.6 31.6 25.7 54.2 56.8 54.2H101v-48.8c0-35.3 30.5-66.4 66.8-66.4m-6.6-183.4a20.4 20.4 0 1 1 0 40.8 20.4 20.4 0 1 1 0-40.8"/></svg> </a> </div> </div> </div> </footer> </div> <div class="md-dialog" data-md-component="dialog"> <div class="md-dialog__inner md-typeset"></div> </div> <script id="__config" type="application/json">{"annotate":null,"base":"../..","features":["content.code.annotate","content.code.copy","content.tabs.link","content.tooltips","navigation.indexes","navigation.instant","navigation.instant.prefetch","navigation.sections","navigation.top","navigation.tracking","search.highlight","toc.follow"],"search":"../../assets/javascripts/workers/search.7d14d953.min.js","tags":null,"translations":{"clipboard.copied":"Copied to clipboard","clipboard.copy":"Copy to clipboard","search.result.more.one":"1 more on this page","search.result.more.other":"# more on this page","search.result.none":"No matching documents","search.result.one":"1 matching document","search.result.other":"# matching documents","search.result.placeholder":"Type to start searching","search.result.term.missing":"Missing","select.version":"Select version"},"version":null}</script> <script src="../../assets/javascripts/bundle.69c251d7.min.js"></script> </body> </html>

Document and canvas¶

Doc¶

Doc ¶

width instance-attribute ¶

height instance-attribute ¶

theme instance-attribute ¶

pad instance-attribute ¶

title instance-attribute ¶

description instance-attribute ¶

blocks instance-attribute ¶

links instance-attribute ¶

overlays instance-attribute ¶