bit-field

rendering bit field diagram from the description

Usage no npm install needed!

<script type="module">
  import bitField from 'https://cdn.skypack.dev/bit-field';
</script>

README

NPM version Linux MacOS Windows Coverage Status

Install

npm i bit-field

Library usage

const render = require('bit-field/lib/render');
const onml = require('onml');

const reg = [
  {bits: 8, name: 'data'}
];

const options = {
  hspace: 888
};

const jsonml = render(reg, options);
const html = onml.stringify(jsonml);
// <svg...>

CLI Usage

npx bit-field [options] > alpha.svg

options

Options:
      --version     Show version number                                [boolean]
  -i, --input       path to the source                                [required]
      --vspace      vertical space                        [number] [default: 80]
      --hspace      horizontal space                     [number] [default: 640]
      --lanes       rectangle lanes                        [number] [default: 2]
      --bits        overall bitwidth                      [number] [default: 32]
      --fontsize    font size                             [number] [default: 14]
      --fontfamily  font family                          [default: "sans-serif"]
      --fontweight  font weight                              [default: "normal"]
      --compact     compact format                    [boolean] [default: false]
      --hflip       horizontal flip                   [boolean] [default: false]
      --vflip       vertical flip                     [boolean] [default: false]
      --help        Show help                                          [boolean]

alpha.json

[
    { "name": "IPO",   "bits": 8, "attr": "RO" },
    {                  "bits": 7 },
    { "name": "BRK",   "bits": 5, "attr": "RW", "type": 4 },
    { "name": "CPK",   "bits": 1 },
    { "name": "Clear", "bits": 3 },
    { "bits": 8 }
]

alpha.svg

Heat Sink

Online Examples

https://observablehq.com/collection/@drom/bitfield