{"_id":"@andyvanee/html-diagram","name":"@andyvanee/html-diagram","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@andyvanee/html-diagram","version":"0.0.1","description":"HTML-native diagram components built with Web Components","license":"MIT","repository":{"type":"git","url":"git+https://github.com/andyvanee/html-diagram.git"},"module":"dist/index.js","main":"dist/index.js","exports":{".":{"import":"./dist/index.js","default":"./dist/index.js"}},"publishConfig":{"access":"public"},"type":"module","devDependencies":{"@happy-dom/global-registrator":"^20.13.2","@types/bun":"latest"},"scripts":{"build:examples":"bun build ./examples/1.usage.html --outdir ./build --target browser && bun -e 'const output = \"./build/1.usage.html\"; const scriptPath = (await Array.fromAsync(new Bun.Glob(\"build/1.usage-*.js\").scan())).at(0); if (!scriptPath) throw new Error(\"Example bundle was not generated\"); const html = await Bun.file(output).text(); const script = await Bun.file(scriptPath).text(); await Bun.write(output, html.replace(/<script type=\"module\" crossorigin src=\"\\.\\/[^\"]+\"><\\/script>/, `<script type=\"module\">\\n${script}\\n</script>`)); await Bun.file(scriptPath).delete()'","build:package":"rm -rf ./dist && bun build ./index.ts --outdir ./dist --target browser --format esm --minify","test":"bun test","typecheck":"bunx tsc --noEmit"},"peerDependencies":{"typescript":"^5"},"prettier":{"semi":false,"tabWidth":2,"printWidth":100,"singleQuote":false,"trailingComma":"all","bracketSpacing":true,"arrowParens":"avoid"},"_id":"@andyvanee/html-diagram@0.0.1","gitHead":"34eeefd700535833ec1e4f8333bcc0aabc8cfd1f","bugs":{"url":"https://github.com/andyvanee/html-diagram/issues"},"homepage":"https://github.com/andyvanee/html-diagram#readme","_nodeVersion":"22.18.0","_npmVersion":"10.9.3","dist":{"integrity":"sha512-BjZVHjD3nw8SFD6F50IytvkB6/q9iQzkYE8bhGHWLaiHWFDV61F7xMGR5VG3dnYbN46vhGPgIi5EH2hckRCTSA==","shasum":"70dfb454822a98ace943821d209e26c1ec3d868b","tarball":"https://registry.npmjs.org/@andyvanee/html-diagram/-/html-diagram-0.0.1.tgz","fileCount":4,"unpackedSize":17286,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCdal+LJ+ZiN4x1XAaKibrShKHY3qYP5yw67zA80uLlxAIhAME8u7nAeqtL7rqIZoZjuapozPKEGToAuCCOenVvSHo2"}]},"_npmUser":{"name":"andyvanee","email":"1andyvanee@gmail.com"},"directories":{},"maintainers":[{"name":"andyvanee","email":"1andyvanee@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/html-diagram_0.0.1_1788469363005_0.10885963993061121"},"_hasShrinkwrap":false}},"time":{"created":"2026-09-03T21:02:42.804Z","0.0.1":"2026-09-03T21:02:43.145Z","modified":"2026-09-03T21:02:43.320Z"},"maintainers":[{"name":"andyvanee","email":"1andyvanee@gmail.com"}],"description":"HTML-native diagram components built with Web Components","homepage":"https://github.com/andyvanee/html-diagram#readme","repository":{"type":"git","url":"git+https://github.com/andyvanee/html-diagram.git"},"bugs":{"url":"https://github.com/andyvanee/html-diagram/issues"},"license":"MIT","readme":"# html-diagram\n\n`html-diagram` is a way to make diagrams from ordinary HTML. Your diagram can be opened in a browser, styled with CSS, and saved as a standalone HTML file.\n\nThe project is at an early implementation stage. The two entrypoints below describe the intended experience and the markup the library is being built around.\n\n## Choose Your Starting Point\n\n### 1. Visual editor: design and product work\n\nUse the visual editor when you want to make a diagram without writing code.\n\nYou will be able to:\n\n1. Open the editor in a browser.\n2. Add and arrange boxes, groups, and connections.\n3. Put your own labels and HTML content inside each box.\n4. Export the result as one standalone `.html` file.\n5. Share or open that file in any modern browser.\n\n**Requirements:** a modern web browser. No programming setup is needed.\n\nThe exported file is intended to be portable: it contains the diagram and its presentation in one place, so it can be shared as an attachment or kept with a project document.\n\n### 2. Library import: developer work\n\nUse the library when you want to place a diagram directly in an existing HTML page.\n\nThe intended workflow is:\n\n1. Add the `@andyvanee/html-diagram` package to your project.\n2. Import it from your page or application.\n3. Write the diagram as HTML.\n4. Use normal HTML attributes and CSS classes to describe and style it.\n\n```html\n<script type=\"module\">\n  import \"@andyvanee/html-diagram\"\n</script>\n\n<html-diagram layout=\"dagre\" direction=\"LR\" grid=\"20\">\n  <d-node id=\"start\" dx=\"2\" dy=\"4\">Start here</d-node>\n  <d-node id=\"finish\" dx=\"14\" dy=\"4\">Finish here</d-node>\n  <d-edge from=\"start\" to=\"finish\" label=\"Next\"></d-edge>\n</html-diagram>\n```\n\n**Requirements:** an HTML document and a browser that supports Web Components. The package and runtime API are still being developed, so this example shows the planned import and markup style.\n\n## Examples\n\nBuild the usage example with Bun:\n\n```bash\nbun run build:examples\n```\n\nThen open `build/1.usage.html` in a browser. The generated file includes its bundled browser script, so it can be opened directly without a web server.\n\n## Learn More\n\n- [Design document](docs/html-diagram.md): vision, competitive landscape, element types, rendering layers, layout, styling, and the implementation roadmap.\n- [MIT License](LICENSE)\n\n## Publishing\n\nThe repository has two GitHub Actions publishing paths:\n\n- **Examples:** pushes to `main` build `examples/1.usage.html` and deploy it to [GitHub Pages](https://andyvanee.github.io/html-diagram/). Enable Pages for the repository with **GitHub Actions** as its source.\n- **Library:** pushing a tag such as `v0.1.0` runs tests, builds the package, and publishes it to npm.\n\nBefore the first npm release, configure npm Trusted Publishing for `@andyvanee/html-diagram`:\n\n1. Create the package on npm or publish the first version manually.\n2. In the package settings, add a GitHub Actions trusted publisher.\n3. Use `andyvanee` as the owner, `html-diagram` as the repository, and `publish.yml` as the workflow filename.\n4. Publish a new version by pushing a matching Git tag, for example `v0.1.0`.\n\nOnce a version is published, it can be loaded from a browser with a pinned CDN URL:\n\n```html\n<script\n  type=\"module\"\n  src=\"https://cdn.jsdelivr.net/npm/@andyvanee/html-diagram@0.1.0/dist/index.js\"\n></script>\n```\n\nThe equivalent UNPKG URL is `https://unpkg.com/@andyvanee/html-diagram@0.1.0/dist/index.js`. Use an exact version for stable, cacheable links. These CDN links are convenient for lightweight HTML pages; use `bun run build:examples` when the result must be a completely self-contained HTML file with no network dependency.\n\n## Project Status\n\nThe repository currently contains the design documentation, builtin diagram elements, a Bun/TypeScript package build, and the first runtime foundation: `DiSchema` for property metadata and validation, and `DiElement` for declarative custom elements. The visual editor and exporter are planned next.\n","readmeFilename":"README.md","_rev":"1-292c3d0905790f980005d2b5c042521a"}