https://github.com/davidthings/hdelk

Web-based HDL diagramming tool
https://github.com/davidthings/hdelk

browser diagrams edges elkjs fpga graphs hdelk hdl javascript nodes

Last synced: 3 months ago
JSON representation

Web-based HDL diagramming tool

• Host: GitHub
• URL: https://github.com/davidthings/hdelk
• Owner: davidthings
• License: apache-2.0
• Created: 2019-06-06T01:19:04.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-05-01T07:28:11.000Z (over 1 year ago)
• Last Synced: 2024-07-15T11:47:40.227Z (4 months ago)
• Topics: browser, diagrams, edges, elkjs, fpga, graphs, hdelk, hdl, javascript, nodes
• Language: JavaScript
• Homepage: https://davidthings.github.io/hdelk/
• Size: 1.54 MB
• Stars: 71
• Watchers: 4
• Forks: 9
• Open Issues: 12
• Metadata Files:
  • Readme: readme.md
  • Contributing: docs/.github/CONTRIBUTING.md
  • Funding: docs/.github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

• awesome-opensource-hardware - hdelk

README

        

![](images/banner.png)

# HDElk

HDElk is a web-based HDL diagramming tool. It was designed to permit the easy visual representation of Verilog or VHDL (generically HDL’s, Hardware Description Languages) in web pages by creation of simple javascript specification objects.

The HDElk [website](https://davidthings.github.io/hdelk/) has an Overview, Installation Instructions and a Tutorial

## Simple Example

Here's a simple diagram

![](images/simple_diagram.svg)

And here's the code that would generate it on a web page

``` HTML

    var simple_graph = {

        id: "",

        children: [

            { id: "in", port: 1 },

            { id: "one", ports: ["in", "out"] },

            { id: "two", highlight:1, ports: ["in", "out"] },

            { id: "three", ports: ["in", "out"] },

            { id: "out", port: 1 }

        ],

        edges: [

            ["in","one.in"],

            {route:["one.out","two.in"],highlight:1},

            {route:["two.out","three.in"],highlight:1,bus:1},

            {route:["three.out","out"], bus:1 }

        ]

    }

    hdelk.layout( simple_graph, "simple_diagram" );



```


## Use

Grab the three js files.

Insert the above into an HTML file.

Browse to it.

See the [example.html](example.html) file