BioCypher Schema Helper - Web Version

A pure JavaScript/HTML tool for creating and editing BioCypher schema configurations. This tool can be embedded in documentation sites, including GitHub Pages.

Features

• 📊 Visualize schemas as interactive graphs using vis.js
• ✏️ Edit schemas with an intuitive interface
• ➕ Add entities and relationships easily
• 🗑️ Delete elements with reference checking
• 💾 Download configurations as YAML files
• 🎯 Validate class names according to BioCypher conventions
• 📝 YAML preview with syntax highlighting (Monaco Editor)

Live Demo

Try it at: https://biocypher.github.io/schema-helper-web/

Usage

Standalone

1. Open index.html in a web browser
2. Upload a YAML schema file or use the toy dataset
3. Visualize, edit, and download your schema

Embedding in Documentation

For GitHub Pages / Static Sites

<iframe 
    src="https://biocypher.github.io/schema-helper-web/index.html" 
    width="100%" 
    height="800px" 
    frameborder="0"
    style="border: 1px solid #ddd; border-radius: 8px;">
</iframe>

For Material for MkDocs

See INTEGRATION.md for detailed integration instructions.

Deployment

GitHub Pages

This repository is configured to automatically deploy to GitHub Pages when changes are pushed to the main branch.

1. Push code to main branch
2. GitHub Actions will automatically deploy
3. Access at https://biocypher.github.io/schema-helper-web/

Manual Deployment

1. Clone this repository
2. Enable GitHub Pages in repository settings
3. Select source: Deploy from a branch → main → / (root)

File Structure

schema-helper-web/
├── index.html              # Main HTML file
├── styles.css              # Stylesheet
├── app.js                  # Application logic
├── README.md               # This file
├── INTEGRATION.md          # Integration guide for docs
├── .gitignore
└── .github/
    └── workflows/
        └── pages.yml       # GitHub Actions deployment

Dependencies (CDN)

All dependencies are loaded from CDN:

• vis.js - Graph visualization
• js-yaml - YAML parsing and generation
• Monaco Editor - Code editor for YAML preview

No build step or npm installation required!

Browser Support

• Chrome/Edge (latest)
• Firefox (latest)
• Safari (latest)

Development

Local Development

1. Clone the repository
2. Open index.html in a browser
3. Or serve with a local server:

   python -m http.server 8000

4. Access at http://localhost:8000

Making Changes

1. Edit index.html, styles.css, or app.js
2. Test locally
3. Commit and push to main
4. GitHub Actions will deploy automatically

Integration with BioCypher Documentation

See INTEGRATION.md for detailed instructions on embedding this tool in BioCypher documentation.

License

MIT License - same as BioChatter Light and BioCypher

Contributing

Contributions are welcome! Please:

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

Support

For issues or questions:

• Open an issue in this repository
• Check INTEGRATION.md for embedding questions
• Contact the BioCypher team