Componentsbeta for Circuit Diagram


The render section tells Circuit Diagram what your component should look like. The render section is made up of a <render> tag, which contains a number of groups (similar to the connections section) with conditions, where each group contains one or more render commands.

    <group conditions="CONDITIONS">
        (render commands here)

Render commands allow you to draw the following: line, rectangle, ellipse, text and path.


The line is the simplest render command, drawing a straight line between two points, and having only two attributes: start and end.

These both follow the same syntax as the start and end used for connections.

<line start="_Start" end="_Middle-20x" />


This command draws a rectangle, allowing you to specify:

  • x starting coordinate
  • y starting coordinate
  • width
  • height
  • whether the rectangle should be filled
<rect x="_Start-8x" y="_Middle-20y" width="16" height="40" />
<rect x="_Start-22x" y="_Middle+10y" width="16" height="40" fill="true" />


This command draws an ellipse (or circle), allowing you to specify:

  • centre
  • x radius
  • y radius
  • whether the ellipse should be filled
<ellipse centre="_Middle" rx="26" ry="26" />
<ellipse centre="_Middle" rx="26" ry="26" fill="true" />


This command draws a piece of text. The text to be drawn can either be static text, or a single property name preceeded by a dollar symbol.

When displaying a property, you cannot add any additional text to it. This can instead be achieved using property formatting described earlier.

<text value="$Resistance" x="_Middle" y="_Start-17" align="CentreCentre" />

The attributes are:

  • value - the text or property to render
  • x - the x-coordinate
  • y - the y-coordinate
  • align - where the anchor point should be:
    • The first word gives the vertical location, any one of:
      • Top
      • Centre
      • Bottom
    • The second word gives the horizontal location, any one of:
      • Left
      • Centre
      • Right


The path command draws a path using svg-style syntax.

It has start, data and the optional fill="true" attributes.

<path start="_Middle-20y" data="m -26,-16 l 8,8 m 1,1 l -2,-4 l -2,2 l 4,2 l -2,-4" />

The start attribute defines where the path starts, and the data attribute contains the path information. All svg commands within the data section must be relative - use lowercase letters only.

For a tutorial on svg commands, visit this page.


Below is a portion of the render section of the Resistor component.


    <!-- Standard -->
    <group conditions="horizontal">
        <line start="_Start" end="_Middle-20x" />
        <rect x="_Middle-20x" y="_Start-8y" width="40" height="16" />
        <line start="_Middle+20x" end="_End" />
    <group conditions="horizontal,$Type!=Variable,$Type!=Thermistor,$Type!=LDR">
        <text value="$Resistance" x="_Middle" y="_Start-17" align="CentreCentre" />
    <group conditions="!horizontal">
        <line start="_Start" end="_Middle-20y" />
        <rect x="_Start-8x" y="_Middle-20y" width="16" height="40" />
        <line start="_Middle+20y" end="_End" />
    <group conditions="!horizontal,$Type!=Variable,$Type!=Thermistor,$Type!=LDR">
        <text value="$Resistance" x="_Start-14" y="_Middle" align="CentreRight" />

    <!-- Potentiometer -->
    <group conditions="horizontal,$Type==Potentiometer">
        <path start="_Middle-20x" data="m 14,16 l 6,-6 l 6,6 m -6,-5 l 0,18" />
    <group conditions="!horizontal,$Type==Potentiometer">
        <path start="_Middle-20y" data="m 16,14 l -6,6 l 6,6 m -5,-6 l 18,0" />



Next: finishing