{"id":17431971,"url":"https://github.com/nic30/d3-hwschematic","last_synced_at":"2025-05-09T00:03:36.061Z","repository":{"id":48724703,"uuid":"138081540","full_name":"Nic30/d3-hwschematic","owner":"Nic30","description":"D3.js and ELK based schematic visualizer","archived":false,"fork":false,"pushed_at":"2024-02-27T06:40:53.000Z","size":6736,"stargazers_count":102,"open_issues_count":19,"forks_count":14,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-05-09T00:02:56.931Z","etag":null,"topics":["circuit","visualizer"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"epl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Nic30.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-06-20T20:18:08.000Z","updated_at":"2025-05-05T10:45:00.000Z","dependencies_parsed_at":"2024-01-17T08:00:02.147Z","dependency_job_id":"c8825164-5914-4ebb-86d9-b196cfc526f8","html_url":"https://github.com/Nic30/d3-hwschematic","commit_stats":{"total_commits":301,"total_committers":6,"mean_commits":"50.166666666666664","dds":0.1661129568106312,"last_synced_commit":"65f6487e1d664c217d6d963acfffea62a7042991"},"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nic30%2Fd3-hwschematic","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nic30%2Fd3-hwschematic/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nic30%2Fd3-hwschematic/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nic30%2Fd3-hwschematic/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Nic30","download_url":"https://codeload.github.com/Nic30/d3-hwschematic/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253166502,"owners_count":21864475,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["circuit","visualizer"],"created_at":"2024-10-17T08:09:27.643Z","updated_at":"2025-05-09T00:03:35.801Z","avatar_url":"https://github.com/Nic30.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# d3-hwschematic\n[![Travis-ci Build Status](https://travis-ci.org/Nic30/d3-hwschematic.png?branch=master)](https://travis-ci.org/Nic30/d3-hwschematic)\n[![Windows Build Status](https://ci.appveyor.com/api/projects/status/73w4swf18m8mr1t0?svg=true)](https://ci.appveyor.com/project/Nic3084362/d3-hwschematic)\n[![npm version](https://badge.fury.io/js/d3-hwschematic.svg)](https://badge.fury.io/js/d3-hwschematic)[![Coverage Status](https://coveralls.io/repos/github/Nic30/d3-hwschematic/badge.svg?branch=master)](https://coveralls.io/github/Nic30/d3-hwschematic?branch=master)[![Documentation Status](https://readthedocs.org/projects/d3-hwschematic/badge/?version=latest)](http://d3-hwschematic.readthedocs.io/en/latest/?badge=latest)\n\nD3.js and ELK based schematic visualizer.\n\nUse `npm install d3-hwschematic --save` to install this library and save it to your package.json file.\n\n## Features:\n\n* automatic layout (layered graph with orthogonal routing, created by `elkjs`) with caching\n* hierarchical components expandable on click\n* net selection on click, highligh and tooltip on mouse over\n* zoom, drag\n* css style/class specifiable in input json, d3.js querey as a query language in javascript\n* support for user node renderers and user CSS\n* input is [ELK json](https://www.eclipse.org/elk/documentation/tooldevelopers/graphdatastructure/jsonformat.html) with hwMeta propoperty (described in this document)\n\n![cdc_pulse_gen](https://github.com/Nic30/d3-hwschematic/raw/master/doc/cdc_pulse_gen.png \"cdc_pulse_gen\")\n\n## Typical usecase\n\n* A widget in for \"synthesis tool\" [jupyter_widget_hwt](https://github.com/Nic30/jupyter_widget_hwt)\n* An extension for Sphinx document generator [sphinx-hwt](https://github.com/Nic30/sphinx-hwt)\n\n## How to use examples\n\n### Online\n\n* Documentation of [hwtLib](https://hwtlib.readthedocs.io/en/latest/?badge=latest).\n  (Look for scheme href under component name.)\n\n* [jupyter_widget_hwt](https://github.com/Nic30/jupyter_widget_hwt) - Jupyter widgets for hw developement.\n\n\n### From this git\n\n1. download dependencies and build this library\n\n```bash\nnpm install\nnpm install --only=dev\nnpm run build\n```\n\n2. Then you can open examples, but current web browsers does not allow to load files from local disk (because of security).\nIt has multiple solution\n  * You can run chrome with --allow-file-access-from-files option\n  * (prefered) Or use webserver. One webserver implementation is part of standard python distribution.\n\n```bash\n# (in root directory of this git)\npython3 -m http.server 8888\n```\n\nNow you should be able to view the example application on http://0.0.0.0:8888/examples/example.html?schematic=/examples/schemes/Cdc.json.\nWhere part after schematic= is path to json file where schematic is stored.\n\n\n## ELK json format for d3-hwschematic\n\nThis libarary uses [ELK json](https://www.eclipse.org/elk/documentation/tooldevelopers/graphdatastructure/jsonformat.html), [ELK options](https://www.eclipse.org/elk/reference/options.html).\nThis format is basically a component tree stored in json.\nThe json specifies not just the structure of circuit but also how the circuit should be rendered.\nIt contains 3 object types `LNode`, `LPort` and `LEdge`.\n\nELK `LNode` (component instance)\n```javascript\n{\n  \"id\": \"0\",\n  \"hwMeta\": { // [d3-hwschematic specific]\n    \"name\": \"compoent instance name\", // optional str\n    \"cls\": \"compoent (module) name\", // optional str\n    \"bodyText\": \"\", // optional str\n    \"maxId\": 2, // max id of any object in this node used to avoid re-counting object if new object is generated\n    \"isExternalPort\": true, // optional flag which set LNode style to external LPort\n    \"cssClass\": \"node-style0\", // optional string, css classes separated by space\n    \"cssStyle\": \"fill:red\", // css style specification separated by ;\n  },\n  \"properties\": { // recommended renderer settings\n    \"org.eclipse.elk.portConstraints\": \"FIXED_ORDER\", // can be also \"FREE\" or other value accepted by ELK\n    \"org.eclipse.elk.layered.mergeEdges\": 1\n  },\n  \"ports\": [],    // list of LPort\n  \"edges\": [],    // list of LEdge\n  \"children\": [], // list of LNode, if the node should be collapsed rename this property\n                  // to \"_children\" and \"edges\" to \"_edges\"\n}\n```\nIf the children should be collapsed by default, the children `children` and `edges` property should be renamed to `_children` and `_edges`.\n\nELK `LPort`\n```javascript\n{\n  \"id\": \"1\",\n  \"hwMeta\": { // [d3-hwschematic specific]\n    \"name\": \"port name\",\n    \"cssClass\": \"node-style0\", // optional string, css classes separated by space\n    \"cssStyle\": \"fill:red\", // css style specification separated by ;\n    \"connectedAsParent\": true, // an optional flag that notes that this LPort\n                               // has no connections but it is connected as its parent LPort\n  },\n  \"direction\": \"OUTPUT\", // [d3-hwschematic specific] controlls direction marker\n  \"properties\": {\n    \"side\": \"EAST\",\n    \"index\": 0 // The order is assumed as clockwise, starting with the leftmost port on the top side.\n                   // Required only for LNodes with \"org.eclipse.elk.portConstraints\": \"FIXED_ORDER\"\n  },\n  \"children\": [], // list of LPort, if the port should be collapsed rename this property to \"_children\"\n}\n```\n\nELK `LEdge`\n```javascript\n{ // simple LEdge\n  \"id\": \"62\",\n  \"source\": \"2\", // id of LNode\n  \"sourcePort\": \"23\", // id of LPort\n  \"target\": \"4\", // id of LNode\n  \"targetPort\": \"29\", // id of LPort\n  \"hwMeta\": { // [d3-hwschematic specific]\n    \"name\": null // optional string, displayed on mouse over\n    \"cssClass\": \"link-style0\", // optional string, css classes separated by space\n    \"cssStyle\": \"stroke:red\", // css style specification separated by ;\n  }\n}\n{ // hyper LEdge\n  \"id\": \"1119\",\n  \"sources\": [\n    [\"17\", \"343\"]  // id of LNode, id of LPort\n  ],\n  \"targets\": [\n    [ \"18\", \"346\"],  // id of LNode, id of LPort\n    [ \"21\", \"354\"],\n  ],\n  \"hwMeta\": { // [d3-hwschematic specific]\n    \"name\": \"wr_ptr\",\n    \"cssClass\": \"link-style0\", // optional string, css classes separated by space\n    \"cssStyle\": \"stroke:red\", // css style specification separated by ;\n  }\n}\n```\n\n`LEdge` souce destination has to always be directly visible from the `LNode` where the `LEdge` is instanciated.\nThat means that LEdge may connect only to LPorts of current LNode or to LPorts of this LNode direct children `LNode`s.\n`LNode` represents all types of components. Top LPorts are also represented as `LNode` because it looks better.\n\n\n## Component shapes\n\nThe style and shape is determined by node renderers. Node renderers are defined in `src/node_renderers`.\nRenderer classes can be registered using  `HwSchematic.nodeRenderers.registerRenderer()` function on HwSchematic object.\nThe node renderer has function `select` which is used to determine if renderer should be used for for selected LNode.\n\n\n\n## Similar opensource projects\n\n* [adaptagrams](https://github.com/mjwybrow/adaptagrams) - C++, Libraries for constraint-based layout and connector routing for diagrams.\n* [BreadboardSim](https://github.com/daveshah1/BreadboardSim) - C#, Circuit Simulator with Breadboard UI\n* [circuitsandbox](http://bitbucket.org/kwellwood/circuitsandbox) - Java, Boolean network editor and simulator\n* [diagrammer](https://github.com/freechipsproject/diagrammer) - Scala, Very simple visualizer for chisel3.\n* [Digital](https://github.com/hneemann/Digital) - Java, Simulator and design tool with GUI.\n* [digitaljs](https://github.com/tilk/digitaljs) - JS, Simulator with Yosys synthesis and ElkJS interactive scheme\n* [dkilfoyle/logic](https://github.com/dkilfoyle/logic) - JS, IDE for digital circuit simulation\n* [Eclipse Layout Kernel (ELK)](https://github.com/eclipse/elk) - Java, Libary focused on automatic graph drawing.\n* [electric-circuits](https://github.com/symbench/electric-circuits) - JS, Electric Circuits Domain for webGME\n* [elkjs](https://github.com/kieler/elkjs) - JS, ELK transpiled to JS, (used in this project)\n* [HAL](https://github.com/emsec/hal) - Python, The Hardware Analyzer\n* [hdelk](https://github.com/davidthings/hdelk) - Web-based HDL diagramming tool\n* [hneemann/Digital](https://github.com/hneemann/Digital) - Java, Circut simulator and editor\n* [hwstudio](https://github.com/umarcor/hwstudio) - GDScript, GUI editor for hardware description designs\n* [logidrom](https://github.com/wavedrom/logidrom) - JS, Digital circuit renderer for some specific circuits\n* [Logisim evolution](https://github.com/logisim-evolution/logisim-evolution) - Java, Set of tools for HW design.\n* [netlistsvg](https://github.com/nturley/netlistsvg) - draws an SVG schematic from a JSON netlist\n* [ogdf](https://github.com/ogdf/ogdf) - C++, Libary focused on automatic graph drawing.\n* [pyVhdl2Sch](https://github.com/LaurentCabaret/pyVhdl2Sch) -  Python based VHDL to (pdf) schematic converter\n* [schemdraw](https://bitbucket.org/cdelker/schemdraw) - Python, manual layout electrical circuit schematic diagrams\n* [Siva](https://github.com/jasonpjacobs/Siva) - Python, Qt based scheme editor\n* [sphinxcontrib-hdl-diagrams](https://github.com/SymbiFlow/sphinxcontrib-hdl-diagrams) - Python, Sphinx Extension which generates various types of diagrams from Verilog code.\n* [Spyce](https://github.com/imec-myhdl/Spyce) - Python, Simple circuit editor, MyHDL output (only prototype)\n* [verilog-dot](https://github.com/ben-marshall/verilog-dot) - Python, A simple dot file / graph generator for Verilog syntax trees.\n* [VSRTL](https://github.com/mortbopet/VSRTL/) - C++, Visual Simulation of Register Transfer Logic\n\n## Related opensource for electronic circuits electronic\n\n* [CuFlow](https://github.com/jamesbowman/cuflow) - Python, experimental procedural PCB layout program\n* [skidl](https://github.com/devbisme/skidl) library for circuit design\n* [kiutils](https://github.com/mvnmgrx/kiutils) kicad file parser\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnic30%2Fd3-hwschematic","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnic30%2Fd3-hwschematic","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnic30%2Fd3-hwschematic/lists"}