Search...Search plugins and themes...
⌘K
Sign in
  • Get started
  • Download
  • Pricing
  • Enterprise
  • Account
  • Obsidian
  • Overview
  • Sync
  • Publish
  • Canvas
  • Mobile
  • Web Clipper
  • CLI
  • Learn
  • Help
  • Developers
  • Changelog
  • About
  • Roadmap
  • Blog
  • Resources
  • System status
  • License overview
  • Terms of service
  • Privacy policy
  • Security
  • Community
  • Plugins
  • Themes
  • Discord
  • Forum / 中文论坛
  • Merch store
  • Brand guidelines
Follow us
DiscordTwitterBlueskyThreadsMastodonYouTubeGitHub
© 2026 Obsidian

Byte Field Diagrams

natri0natri0386 downloads

Adds diagrams that show how structures are laid out in memory / network.

Add to Obsidian
  • Overview
  • Scorecard
  • Updates3

a simple Obsidian plugin adding support for byte-field diagrams.

usage

a byte-field diagram is one of those tables that show offsets of fields in e.g. network packets:

image

to create one, simply make a codeblock and add your fields.

```bytefield
field1: 3
field2: 4
field3: 1
```
simple diagram as above

every line has to contain the name of the field, : as the delimiter and the length of the field in bytes. lines that do not contain : are silently ignored, so feel free to use them as comments.

also, it is possible to change the offset where the diagram starts:

```bytefield
!curOffset: 7
field1: 5
field2: 3
field3: 4
```
diagram with starting offset set to 7

fields are wrapped around if they're longer than the row:

diagram with one of the fields wrapping around

also, to make an unnamed field that still takes up space (padding), just omit the part before the : :

```bytefield
field1: 3
: 1
field2: 4
```
diagram with one empty/padding byte

building

unlike most, this project is built with Bun. to build the main.js file:

bun run build

to watch:

bun run watch

doing it this way keeps minimal dependencies as Bun supports TypeScript out of the box, and also has a bundler built-in.

HealthGood
ReviewSatisfactory
About
Render byte-field diagrams from Markdown code blocks by parsing lines like name: length to display byte offsets and field sizes. Support custom start offsets, unnamed padding fields, comment lines, and automatic wrapping for fields that exceed a row.
VisualizationMarkdown
Details
Current version
0.0.3
Last updated
Last year
Created
2 years ago
Updates
3 releases
Downloads
386
Compatible with
Obsidian 0.15.0+
Platforms
Desktop, Mobile
License
MIT
Report bugRequest featureReport plugin
Author
natri0natri0
GitHubnatri0
  1. Community
  2. Plugins
  3. Visualization
  4. Byte Field Diagrams

Related plugins

Excalidraw

Visual PKM powerhouse. Create and edit Excalidraw drawings.

Advanced Canvas

Supercharge your canvas experience. Create presentations, flowcharts and more.

ExcaliBrain

An interactive, structured mind-map of your Obsidian vault.

Linter

Format and style your notes. Linter can be used to format YAML tags, aliases, arrays, and metadata; footnotes; headings; spacing; math blocks; regular Markdown contents like list, italics, and bold styles; and more with the use of custom rule options.

Breadcrumbs

Visualise the hierarchy of your vault using a breadcrumb trail or matrix view.

Mermaid Tools

Improved Mermaid.js experience: visual toolbar with common elements and more.

Custom Frames

Turn web apps into panes using iframes with custom styling. Also comes with presets for Google Keep, Todoist and more.

Maps

Adds a map layout to bases so you can display notes as an interactive map view.

Consistent Attachments and Links

Move note attachments and update links automatically.

Outliner

Work with your lists like in Workflowy or Roam Research.