Skip to content

Feature: Stack multiple layers into single diagram with corner legends #191

@hollowhemlock

Description

@hollowhemlock

Feature: Stack multiple layers into single diagram with corner legends

Summary

Add a stack-layers command that combines multiple keyboard layers into a single compact diagram with corner legends. This creates reference diagrams showing up to 5 layers at once.

Image

Motivation

When documenting keyboard layouts, having separate diagrams for each layer can be overwhelming. A stacked view shows the base layer prominently while indicating what each key does on other layers via small corner legends.

urob's keymap https://github.com/urob/zmk-config

Proposed Solution

New command: keymap stack-layers

keymap stack-layers --center Base --tl Fun --tr Sys --bl Num --br Nav keymap.yaml > stacked.yaml
keymap draw stacked.yaml > stacked.svg

Features

  • Corner positions: Place up to 4 layers in corners (tl, tr, bl, br) around a center layer
  • Hidden legends: Filter out values like modifiers (⇧, ⌃, ⌥, ⌘) from corners via config
  • Glyph support: Corner legends can use glyphs (e.g., $$mdi:arrow-up$$)
  • Combo inclusion: --include-combos LAYER... to include combos from specific layers with deduplication
  • Separate combo layer: --separate-combo-layer to create a stacked_combos layer for overlay diagrams

New config section: stack_config

stack_config:
  hidden_corner_legends: [⇧, ⌃, ⌥, ⌘, sticky]
  hidden_held_legends: []
  hidden_shifted_legends: []

CSS styling

Corner legends use classes tl, tr, bl, br for text and glyphs:

text.tl { fill: #F93827; font-size: 8px; }
use.tl { fill: #F93827; }

Additional Context

See STACKED.md for full documentation.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions