No description
Find a file
waaraawa 482b458370 feat(core): add automatic color assignment for fields
- Add autoColor option (default: true)
    - true: Auto-assign colors to fields without explicit colors
    - false: Use gray for fields without explicit colors
  - Auto color sequence: blue, cyan, yellow, green, orange, purple, mint, pink
  - Padding/reserved fields always use gray
  - Explicit colors always take precedence

  Examples & Documentation:
  - Add 4 example files (basic, manual, mixed, interactive guide)
  - Update examples/README.md with Auto Color section
  - Add Color Options explanation

  Tests:
  - Add 8 new tests (5 layoutEngine, 3 parser)
  - Update existing test for autoColor: false
2025-10-22 22:24:24 +09:00
examples feat(core): add automatic color assignment for fields 2025-10-22 22:24:24 +09:00
packages feat(core): add automatic color assignment for fields 2025-10-22 22:24:24 +09:00
.eslintrc.json chore: initial project setup 2025-10-13 09:34:29 +09:00
.gitignore feat(plugin): add basic SVG rendering prototype 2025-10-13 12:57:20 +09:00
.prettierignore chore: initial project setup 2025-10-13 09:34:29 +09:00
.prettierrc.json chore: initial project setup 2025-10-13 09:34:29 +09:00
CLAUDE.md docs: add archtecture document 2025-10-08 11:58:30 +09:00
jest.config.js chore: initial project setup 2025-10-13 09:34:29 +09:00
LICENSE Initial commit 2025-10-04 00:19:35 +09:00
package.json chore: initial project setup 2025-10-13 09:34:29 +09:00
README.md chore: initial project setup 2025-10-13 09:34:29 +09:00
roadmap.md feat(core): improve legendColumns with row-major order 2025-10-14 13:16:36 +09:00
tsconfig.json chore: initial project setup 2025-10-13 09:34:29 +09:00

ByteGrid

Binary data and C struct memory layout visualization for Obsidian

Overview

ByteGrid is an Obsidian plugin that visualizes binary data and C structure memory layouts as interactive SVG diagrams.

Features

  • 🎨 Color-coded field visualization
  • 📏 Byte-accurate grid layout
  • 🔍 Bitfield support
  • 📊 Hex dump integration
  • 🎯 Interactive tooltips
  • 📤 Multiple export formats (SVG, PNG, C code, Markdown)

Project Status

🚧 In Development - Currently in Phase 1 (MVP)

Quick Start

# Install dependencies
npm install

# Build all packages
npm run build

# Run tests
npm run test

# Lint
npm run lint

# Format code
npm run format

Project Structure

bytegrid/
├── packages/
│   ├── core/              # Core rendering logic
│   └── obsidian-plugin/   # Obsidian plugin
├── docs/                  # Design documentation
└── examples/              # Example files

Documentation

See CLAUDE.md for detailed project guidelines and architecture.

Development

This project follows Test-Driven Development (TDD):

  1. Write tests first
  2. Implement minimal code to pass tests
  3. Refactor

Key Principles

  • offset is SSOT - Field size calculated from offset ranges
  • No magic numbers - Use constants for all layout values
  • Dynamic height - SVG dimensions calculated from content
  • Explicit padding - Use reserved or padding types

License

MIT License - see LICENSE for details

Contributing

Currently in initial development phase. Contribution guidelines will be added soon.