Your npm package EdgeCraft is ready! This advanced graph visualization library supports RDF and LPG graph models with sophisticated rendering capabilities.
EdgeCraft/
├── src/ # Source code
│ ├── core/
│ │ └── Graph.ts # Core graph data structure
│ ├── layout/
│ │ └── LayoutEngine.ts # Layout algorithms (force, hierarchical, etc.)
│ ├── renderer/
│ │ └── Renderer.ts # SVG rendering engine
│ ├── interaction/
│ │ └── InteractionManager.ts # User interaction handling
│ ├── types.ts # TypeScript type definitions
│ ├── EdgeCraft.ts # Main API class
│ └── index.ts # Package entry point
│
├── examples/ # Example HTML files
│ ├── basic.html # Basic LPG example
│ └── rdf.html # RDF triple store example
│
├── dist/ # Built output (created by build)
│ ├── index.js # CommonJS build
│ ├── index.esm.js # ES Module build
│ └── index.d.ts # TypeScript declarations
│
├── Configuration Files
│ ├── package.json # Package configuration
│ ├── tsconfig.json # TypeScript configuration
│ ├── rollup.config.js # Build configuration
│ ├── jest.config.js # Test configuration
│ ├── .eslintrc.js # Linting rules
│ ├── .prettierrc # Code formatting
│ ├── .gitignore # Git ignore rules
│ └── .npmignore # npm publish ignore rules
│
└── Documentation
├── README.md # Main documentation
├── QUICKSTART.md # Quick start guide
├── PUBLISHING.md # Publishing guide
├── CONTRIBUTING.md # Contribution guidelines
├── CHANGELOG.md # Version history
└── LICENSE # MIT License
npm installnpm run buildThis creates the dist/ folder with compiled JavaScript and type definitions.
Open the examples in a browser:
# Start a local server (if you have one)
# Or just open the files directly
start examples\basic.html
start examples\rdf.htmlFollow the detailed guide in PUBLISHING.md:
# Login to npm
npm login
# Publish
npm publish✅ Dual graph model support (LPG and RDF) ✅ Core graph data structure with efficient queries ✅ Association classes for n-ary relationships
✅ Force-directed layout ✅ Hierarchical layout ✅ Circular layout ✅ Grid layout
✅ SVG-based renderer ✅ Multiple node shapes (circle, rectangle, diamond, hexagon) ✅ Customizable styling ✅ Edge arrows and labels ✅ Function-based dynamic styling
✅ Node dragging ✅ Zoom and pan ✅ Node selection (single and multi-select) ✅ Event system (click, hover, drag events) ✅ View controls (fit, center, zoom)
✅ Comprehensive public API ✅ Full TypeScript support ✅ RDF triple querying ✅ Dynamic graph updates ✅ JSON import/export ✅ SVG export
- README.md - Complete documentation with examples
- QUICKSTART.md - 5-minute getting started guide
- PUBLISHING.md - Step-by-step publishing guide
- CONTRIBUTING.md - Development guidelines
# Build the package
npm run build
# Development mode (auto-rebuild on changes)
npm run dev
# Run tests
npm test
# Lint code
npm run lint
# Format code
npm run formatimport { EdgeCraft } from 'edgecraft';
const graph = new EdgeCraft({
container: '#graph',
data: {
nodes: [
{ id: 1, labels: ['Person'], properties: { name: 'Alice' } },
{ id: 2, labels: ['Person'], properties: { name: 'Bob' } }
],
edges: [
{ id: 'e1', source: 1, target: 2, label: 'KNOWS', properties: {} }
]
},
layout: { type: 'force' },
nodeStyle: (node) => ({
fill: '#4a90e2',
radius: 25,
label: { text: node.properties.name }
})
});
// Add interactions
graph.on('node-click', (event) => {
console.log('Clicked:', event.target);
});vs Cytoscape:
- Better TypeScript support
- Cleaner API
- Native RDF support
- Modern ES6+ codebase
vs Vis.js:
- More sophisticated layouts
- Better RDF/semantic web support
- Association class pattern support
- Function-based styling
vs D3:
- Higher-level API (easier to use)
- Built-in graph data structures
- Focus on graph visualization
- Better defaults out of the box
vs KeyLines:
- Open source (MIT license)
- Free to use
- Modern architecture
- Active development
Consider adding these features:
- WebGL renderer for large graphs (10k+ nodes)
- More layout algorithms (radial, tree, organic)
- Animation system for transitions
- Minimap overview
- Search and filter capabilities
- Path finding algorithms
- Graph clustering/grouping
- SPARQL query support for RDF
- Undo/redo functionality
- Export to PNG/PDF
- Touch/mobile support
- Edge bundling for dense graphs
- Context menus
- Automated testing suite
- Issues: GitHub Issues
- Documentation: README.md
- Examples: examples/
To better understand the concepts:
- RDF: https://www.w3.org/RDF/
- Property Graphs: https://neo4j.com/developer/graph-database/
- D3 Force Simulation: https://d3js.org/d3-force
- Graph Theory: https://en.wikipedia.org/wiki/Graph_theory
- First-class RDF Support - Most libraries focus on property graphs
- Association Classes - Support for complex n-ary relationships
- Modern TypeScript - Full type safety and excellent IDE support
- Dual Model - Seamlessly work with both RDF and LPG in one graph
- Clean API - Inspired by the best features of Cytoscape and D3
- Update author information in
package.json - Update repository URLs in
package.json - Choose a unique package name (or use scoped: @username/edgecraft)
- Test the build:
npm run build - Verify examples work
- Create a GitHub repository
- Add repository URL to package.json
- Create npm account if you don't have one
Your graph visualization library is complete and ready to publish. Follow PUBLISHING.md to share it with the world!
# Quick publish checklist:
npm install # Install dependencies
npm run build # Build the package
npm login # Login to npm
npm publish # Publish to npm!Happy coding! 🎨
If you have questions or need help, check the documentation or open an issue on GitHub.