Overview
The workflow involves:- Development: Code diagrams in TypeScript/JavaScript
- Compilation: Build diagrams into deployable assets
- Upload: Deploy compiled files to template builder
- Integration: Use diagrams in Calcs.com templates
System Requirements
Prerequisites (macOS):
- Homebrew package manager
- Node.js and npm
- Git
- Code editor (VS Code recommended)
First Time Setup
1. Install Development Tools
2. Clone Repository
3. Navigate to Diagram Folder
4. Install Dependencies
You must run
npm install in each diagram folder if the repository contains multiple diagrams.Regular Development Workflow
1. Update Repository
2. Install Dependencies (if needed)
3. Compile Diagram
4. Locate Output Files
After compilation, you’ll find the built files:Output File Locations
Output File Locations
For Static Diagrams:
- Location:
/dist/compiled.js - File type: JavaScript module
- Usage: Upload to template builder
- Location:
output/index.html - File type: HTML with embedded JavaScript
- Usage: Upload to template builder
- Both files may need to be uploaded if modifications were made to each
5. Upload to Template Builder
Repository Structure Examples
Single Diagram Repository
Multi-Diagram Repository
Development Best Practices
Version Control
Testing Workflow
- Local Testing: Use
npm testduring development - Integration Testing: Upload to development template
- User Testing: Test with real calculation scenarios
- Production Deployment: Upload to live templates
Dependency Management
Troubleshooting
Common Issues
Compilation Errors
Compilation Errors
Issue:
npm run-script compile failsSolutions:- Ensure
npm installwas run successfully - Check for TypeScript/JavaScript syntax errors
- Verify all required dependencies are installed
- Check Node.js version compatibility
Upload Issues
Upload Issues
Issue: Compiled file doesn’t work in template builderSolutions:
- Verify correct file was uploaded (compiled.js or index.html)
- Check file size limits
- Ensure diagram parameters match template expectations
- Test with minimal parameter set first
Debug Mode
Video Tutorial
For a complete visual walkthrough of this workflow:📹 Watch the complete tutorial: GitHub to Calcs Builder WorkflowThis video covers the entire process from repository setup to template deployment.
Next Steps
After successfully compiling and uploading your diagram:- Test Integration: Verify the diagram works in a test template
- Parameter Validation: Ensure all parameters are handled correctly
- Documentation: Update template documentation
- User Testing: Get feedback from intended users
- Production Deployment: Release to live templates