Taskinity Render

A JavaScript library for rendering Taskinity flow diagrams and syntax highlighting in Markdown documents.

🔗 Live Demo: https://taskinity.github.io/render/

Features

🎨 Automatic syntax highlighting for code blocks (Python, Bash, JavaScript, YAML, JSON, Markdown)
📊 Interactive flow diagram rendering for DSL code blocks
📋 Copy-to-clipboard buttons for code blocks
🔢 Line numbering for code blocks
🎨 Theme support
📦 Lightweight and easy to integrate

Installation

Using npm

npm install taskinity-render

Using CDN

<!-- Load Taskinity Render from CDN -->
<script src="https://cdn.jsdelivr.net/npm/taskinity-render/dist/taskinity-render.min.js"></script>

<!-- Initialize after the script is loaded -->
<script>
  document.addEventListener('DOMContentLoaded', () => {
    window.taskinityRender = new TaskinityRender({
      theme: 'github',
      lineNumbers: true,
      copyButton: true
    });
  });
</script>

Usage

Basic Usage

Option 1: Using a module bundler (recommended)

import TaskinityRender from 'taskinity-render';

// Initialize with options
const taskinityRender = new TaskinityRender({
  theme: 'github',
  lineNumbers: true,
  copyButton: true
});

Option 2: Using a script tag with CDN

Add the following code to your HTML document, just before the closing </body> tag:

<script>
  // Configuration object
  window.taskinityRenderConfig = {
    theme: 'github',
    lineNumbers: true,
    copyButton: true
  };

  // Error handler
  function handleScriptError(error) {
    console.error('Error loading Taskinity Render:', error);
    // Show error message to the user
    const errorDiv = document.createElement('div');
    errorDiv.style.cssText = 'background: #ffebee; border-left: 4px solid #f44336; color: #b71c1c; padding: 1em; margin: 1em 0; border-radius: 4px;';
    errorDiv.innerHTML = `
      <h3 style="margin-top: 0;">Error loading Taskinity Render</h3>
      <p>Failed to load the Taskinity Render script. Please check the following:</p>
      <ol>
        <li>Make sure you're connected to the internet</li>
        <li>Check the browser's console for detailed error messages</li>
        <li>Try refreshing the page</li>
      </ol>
    `;
    document.body.insertBefore(errorDiv, document.body.firstChild);
  }

  // Load the script
  document.addEventListener('DOMContentLoaded', function() {
    const script = document.createElement('script');
    script.src = 'https://cdn.jsdelivr.net/npm/taskinity-render/dist/taskinity-render.min.js';
    script.onerror = () => handleScriptError(new Error('Failed to load script'));
    script.onload = function() {
      try {
        if (typeof TaskinityRender === 'function') {
          window.taskinityRender = new TaskinityRender(window.taskinityRenderConfig);
          console.log('Taskinity Render initialized successfully!');
        } else {
          throw new Error('TaskinityRender is not defined');
        }
      } catch (error) {
        handleScriptError(error);
      }
    };
    document.head.appendChild(script);
  });
</script>

For Markdown Content

If you're using Markdown, make sure your DSL code blocks are wrapped with triple backticks and marked with the dsl language:

flow EmailProcessing:
    description: "Email Processing Flow"
    fetch_emails -> classify_emails
    classify_emails -> process_urgent_emails
    classify_emails -> process_regular_emails
    process_urgent_emails -> send_urgent_notifications
    process_regular_emails -> archive_emails

flow UserRegistration:
    description: "User Registration Flow"
    start -> validate_input
    validate_input -> check_email_availability
    check_email_availability -> create_user_account
    create_user_account -> send_welcome_email
    send_welcome_email -> complete_registration

flow EmailProcessing:
    description: "Email Processing Flow"
    fetch_emails -> classify_emails
    classify_emails -> process_urgent_emails
    classify_emails -> process_regular_emails

For HTML Content

If you're writing HTML directly, use the following format:

<pre><code class="language-dsl">flow EmailProcessing:
    description: "Email Processing Flow"
    fetch_emails -> classify_emails
    classify_emails -> process_urgent_emails
    classify_emails -> process_regular_emails</code></pre>

Example

Here's an example of a DSL flow that will be automatically rendered as a diagram:

flow EmailProcessing:
    description: "Email Processing Flow"
    fetch_emails -> classify_emails
    classify_emails -> process_urgent_emails
    classify_emails -> process_regular_emails

Biblioteka automatycznie wygeneruje interaktywny diagram przepływu.

Configuration

Można dostosować działanie biblioteki:

<script>
  document.addEventListener('DOMContentLoaded', () => {
    window.taskinityRender = new TaskinityRender({
      theme: 'default',
      lineNumbers: true,
      copyButton: true
    });
  });
</script>

Development

Using npm

# Install dependencies
npm install

# Run in development mode
npm run dev

# Build for production
npm run build

# Run linter
npm run lint

# Start local server for testing
npm start

Using Makefile

The project includes a Makefile with useful commands for development and deployment:

# Show help and available commands
make help

# Install dependencies
make install

# Build the package
make build

# Run tests
make test

# Run linter
make lint

# Start local development server (port 9999)
make serve

# Bump version (interactive, asks for patch/minor/major)
make version

# Bump patch version automatically
make patch-version

# Publish to GitHub Pages
make publish-github

# Publish to npm
make publish-npm

# Publish to both npm and GitHub Pages (runs patch-version, publish-npm, and publish-github)
make publish

# Stage, commit, and push changes to GitHub (interactive commit message)
make push

# Clean build artifacts and node_modules
make clean

# Run diagnostic tests
make diagnostic

Development Workflow

Install dependencies:
```
make install
```
Make your changes to the source code in the src directory
Run the development server to test your changes:
```
make serve
```
Then open http://localhost:9999 in your browser
When ready to publish:
```
make publish
```
This will bump the version, publish to npm, and update GitHub Pages.

Troubleshooting

Common Issues

1. "TaskinityRender is not defined" Error

This error occurs when the script fails to load or initialize properly. Here's how to fix it:

Check the script source
- Verify the path to the script is correct
- If using a CDN, make sure the URL is accessible
- If hosting locally, ensure the file exists in the specified location
Check the browser's console
- Look for any network errors (404, CORS issues, etc.)
- Check for syntax errors in your JavaScript code
Loading order
- Make sure the script is loaded before you try to use TaskinityRender
- Use the DOMContentLoaded event as shown in the examples

2. Script Loading Issues

If the script fails to load:

Check your internet connection
Try clearing your browser cache (Ctrl+F5 or Cmd+Shift+R)
Verify the CDN URL is correct
Consider downloading the script and hosting it yourself

3. Styling Issues

If the diagrams or syntax highlighting don't look correct:

Make sure you've included the necessary CSS files
Check for CSS conflicts with your existing styles
Verify that the theme you're using is valid

Development

Building from Source

# Clone the repository
git clone https://github.com/taskinity/render.git
cd render

# Install dependencies
npm install

# Build the project
npm run build

# Start the development server
npm start

Testing

# Run tests
npm test

# Run linter
npm run lint

Contributing

Contributions are welcome! Please read our contributing guidelines for details.

License

This project is licensed under the Apache License 2.0 - see the LICENSE file for details.