36:["$","title",null,{"children":"ELKjs | Neil Turley | Observable"}] 3e:Tded,viewof analogNetlist = html`

{
  "modules": {
    "Common Emitter": {
      "cells": {
        "C1": {
          "connections": {
            "A": [
              12
            ],
            "B": [
              85
            ]
          },
          "port_directions": {
            "A": "input",
            "B": "output"
          },
          "type": "c_v"
        },
        "C2": {
          "connections": {
            "A": [
              70
            ],
            "B": [
              10
            ]
          },
          "port_directions": {
            "A": "input",
            "B": "output"
          },
          "type": "c_h"
        },
        "Q": {
          "connections": {
            "B": [
              10
            ],
            "C": [
              18
            ],
            "E": [
              12
            ]
          },
          "port_directions": {
            "B": "input",
            "C": "input",
            "E": "output"
          },
          "type": "q_npn"
        },
        "R1": {
          "connections": {
            "A": [
              80
            ],
            "B": [
              18
            ]
          },
          "port_directions": {
            "A": "input",
            "B": "output"
          },
          "type": "r_v"
        },
        "R2": {
          "connections": {
            "A": [
              12
            ],
            "B": [
              83
            ]
          },
          "port_directions": {
            "A": "input",
            "B": "output"
          },
          "type": "r_v"
        },
        "R3": {
          "connections": {
            "A": [
              86
            ],
            "B": [
              10
            ]
          },
          "port_directions": {
            "A": "input",
            "B": "output"
          },
          "type": "r_v"
        },
        "R4": {
          "connections": {
            "A": [
              10
            ],
            "B": [
              89
            ]
          },
          "port_directions": {
            "A": "input",
            "B": "output"
          },
          "type": "r_v"
        },
        "gnd83": {
          "connections": {
            "A": [
              83
            ]
          },
          "port_directions": {
            "A": "input"
          },
          "type": "gnd"
        },
        "gnd85": {
          "connections": {
            "A": [
              85
            ]
          },
          "port_directions": {
            "A": "input"
          },
          "type": "gnd"
        },
        "gnd89": {
          "connections": {
            "A": [
              89
            ]
          },
          "port_directions": {
            "A": "input"
          },
          "type": "gnd"
        },
        "vcc80": {
          "connections": {
            "A": [
              80
            ]
          },
          "port_directions": {
            "A": "output"
          },
          "type": "vcc"
        },
        "vcc86": {
          "connections": {
            "A": [
              86
            ]
          },
          "port_directions": {
            "A": "output"
          },
          "type": "vcc"
        }
      },
      "ports": {
        "vin": {
          "bits": [
            70
          ],
          "direction": "input"
        },
        "vout": {
          "bits": [
            18
          ],
          "direction": "output"
        }
      }
    }
  }
}

`3f:[] 3a:{"id":"31f297b1594b2c4c","slug":"netlistsvg-how-to-draw-a-better-schematic-than-graphviz-par/2","title":"ELKjs","thumbnail":"22989ae1c6ba8935a3c37f56d251ff759bdfa31e1ae9af091077d6b8841e0150","access_level":"public","create_time":"$D2019-04-28T03:05:38.578Z","update_time":"$D2019-05-04T07:28:07.241Z","view_time":null,"first_public_time":"$D2019-04-28T03:06:41.333Z","has_unpublished_edits":null,"fork":false,"stars":7,"starred":false,"owner":{"type":"team","id":"d3a5c7e199005588","login":"nturley","name":"Neil Turley","avatar_url":"https://avatars-next.observableusercontent.com/1144dcde8da195bed152315b9c34a7cd1cc33f52ca513a9b8582d9a077aff812","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":137,"publish_version":137,"role":null,"authored":false,"authors":[{"type":"individual","id":"08c0e1b672bab3d7","login":"nturley","name":"Neil Turley","avatar_url":"https://avatars-next.observableusercontent.com/1144dcde8da195bed152315b9c34a7cd1cc33f52ca513a9b8582d9a077aff812","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"08c0e1b672bab3d7","login":"nturley","name":"Neil Turley","avatar_url":"https://avatars-next.observableusercontent.com/1144dcde8da195bed152315b9c34a7cd1cc33f52ca513a9b8582d9a077aff812","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":7,"collection":null,"type":"notebook","body":{"titling":"auto","title":"ELKjs","cells":[{"id":0,"value":"md`### Netlistsvg (part 3)\n\n# ELKjs\n\nThe University of Kiel implemented a graph layout tool called Klay, which was adopted into the Eclipse foundation and was renamed ELK. The tool is written in Java, and also transpiled to JS. This tool specializes in graphs with similar properties to digital netlists.\n\nELK supports a straightforward JSON format for it's input and output file.\n\n![elk](https://raw.githubusercontent.com/OpenKieler/elkjs/master/doc/example_complexRouter.svg?sanitize=true)\n\n# NetlistSvg\nI reimplemented my tool to use ELK for layout and render a static SVG image. To avoid wasting so much time styling and fiddling with layout options and cell templates, I defined a skin file format, similar to wavedrom, so that the layout algorithm is separate from the specific options and templates.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"dot`digraph {\n verilog -> yosys;\n yosys -> \"yosys JSON\";\n \"yosys JSON\" -> netlistsvg;\n \"skin file\" -> netlistsvg;\n netlistsvg -> \"ELK JSON\";\n \"ELK JSON\" -> ELK;\n ELK -> \"ELK JSON\"\n \"ELK JSON\" -> netlistsvg;\n netlistsvg -> \"SVG Result\"\n}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"md`# Live Example`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"{\n const button = html``;\n button.onclick = () => {\n viewof verilog.value = String.raw`module DFF (output reg Q, input C, D, R);\n always @(posedge C)\n if (~R) begin\n Q <= 1'b0;\n end else begin\n Q <= D;\n end\nendmodule`;\n verilog.dispatchEvent(new CustomEvent(\"input\"));\n };\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"viewof verilog = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"html` ${ await netlistsvg.render(netlistsvg.digitalSkin, netlist) }`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"md`\n# Analog Netlists\n\nRecently, there has been interest in text-based languages for board-level hardware design, and so there is a need for analog netlist visualization. Netlistsvg was hoped to be a way to accomplish this aim. Unfortunately, analog netlists carry some additional challenges.\n\n* analog circuits mix horizontal and vertical flow directions\n* analog components can be freely rotated.\n\nDespite these challenges, netlistsvg does a passable job in many cases.\n\nThe analog skin uses a vertical flow direction instead of horizontal.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"html` ${ await netlistsvg.render(netlistsvg.analogSkin, JSON5.parse(analogNetlist)) }`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"md`\n# Future Plans...\n\nMake netlistsvg more useful and easier to use.\n\n * Hierarchal Designs\n * Net labels\n * Net highlighting\n * Post-layout interactivity\n\n## Big plan\nWrite my own layout engine that uses constraint optimization instead of Layered algorithm. Constraint optimization would allow for much more open ended problems, like freely rotating components, and bidirectional layouts.\n\nI've been experimenting with general purpose solvers to see how easy it is to formulate the constraints and objective function.\n\nhttps://github.com/nturley/ilp_layout/blob/master/ILP%20Layout%20Problem.ipynb\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"md`\n[Previous Page](https://observablehq.com/@nturley/netlistsvg-how-to-draw-a-better-schematic-than-graphviz-par)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"md`# Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"ys = new Promise(function(accept, reject) { YosysJS.create(\"\", accept) })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"YosysJS = require('https://nturley.github.io/yosysjs.js').catch(() => window.YosysJS)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"netlistsvg = {\n var ELK = await require('https://nturley.github.io/netlistsvg/elk.bundled.js')\n window.ELK = ELK\n return require('https://nturley.github.io/netlistsvg/built/netlistsvg.bundle.js')\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"netlist = {\n ys.write_file('input.v', verilog)\n ys.run('design -reset; read_verilog input.v; proc; opt_clean; write_json output.json')\n return JSON.parse(ys.read_file('output.json'))\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"JSON5 = require('json5');","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"dot = require(\"@observablehq/graphviz@0.2\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3f","stdlib":"1"}} 35:null