# Blueprint Viewer

English | [中文](README_zh.md)

Render UE Blueprint / Material graph text as interactive diagrams directly in your Obsidian notes.

## Usage

Use a `blueprint` code block and paste the blueprint text copied from UE:

````markdown
```blueprint
Begin Object Class=K2Node_VariableGet ...
...
End Object
```
````

### Options

Set options on the first line inside the code block:

````markdown
```blueprint
MyBlueprintName
<blueprint text>
```
````

Or with explicit key=value:

````markdown
```blueprint
height=600 name=MyBlueprint
<blueprint text>
```
````

| Option | Default | Description |
|------|--------|------|
| `height` | `643` | Render area height (px) |
| `name` | auto | Name label shown next to the copy code button; if the first line is a plain word (not starting with `Begin Object` and not a `key=value` pair), it is used as the name |

## Interaction

| Action | Description |
|------|------|
| `Ctrl + scroll` | Zoom |
| Left-drag | Pan canvas |
| Double-click node | Enter sub-graph (collapsed nodes) |
| `Graph` button | Return to top level |
| `All` button | Fit all nodes (wheel zoom will prompt to click Reset afterwards) |
| `Reset` button | Reset to 1:1 |
| `copy code` | Copy blueprint text to clipboard |

## Copying Blueprint Text from UE

1. In the UE Blueprint editor, select nodes (or `Ctrl+A` to select all)
2. `Ctrl+C` to copy
3. Paste into a ` ```blueprint ` code block in Obsidian

## Technical Notes

- Renderer is a modified version of [BlueprintUE Self-Hosted Edition](https://github.com/blueprintue/blueprintue-self-hosted-edition) (MIT License)
- Packaged as a `<blueprint-viewer>` Web Component, compiled into an Obsidian plugin via esbuild
- Modifications: left-drag pan, `translate3d` GPU acceleration (fixes zoom lag), All fit-to-screen button, copy code, name label, All-mode wheel-zoom hint
- Desktop only (`isDesktopOnly: true`), mobile not supported

## License & Attribution

### Plugin License

This plugin is released under the **MIT License** — see [LICENSE](LICENSE).

### Third-Party Attribution

The rendering engine code comes from [BlueprintUE Self-Hosted Edition](https://github.com/blueprintue/blueprintue-self-hosted-edition):

- Rendering engine: BlueprintUE `render.js` (MIT)
- Stylesheet: BlueprintUE `render.css` (MIT)

**Original project info:**
- Project: BlueprintUE Self-Hosted Edition
- Repository: [blueprintue/blueprintue-self-hosted-edition](https://github.com/blueprintue/blueprintue-self-hosted-edition)
- License: MIT License
- Copyright: © BlueprintUE Contributors

This plugin is built on top of the original with modifications (left-drag pan, translate3d GPU acceleration, All button, copy code, etc.), and retains the original copyright notice per MIT license terms.

## Support

If this plugin helps you, consider buying me a coffee ☕

<div align="center">
  <table>
    <tr>
      <td align="center">Alipay</td>
      <td align="center">WeChat Pay</td>
    </tr>
    <tr>
      <td><img src="docs/alipay-qr.png" width="260" /></td>
      <td><img src="docs/wechat-qr.png" width="260" /></td>
    </tr>
  </table>
</div>