DevLog #1: Deploying the Code-to-Diagram Utility & Fixing Clipboard Glitches

Our first major log entry takes us into the mechanics of moving an interactive application from a local sandbox onto our live production servers. The goal for this release was two-fold: introducing a major architectural visualization feature and polishing a minor user interface detail that was causing friction for developers trying to copy code snippets.

Here is how we handled the deployment, the underlying logic of the new feature, and the user experience fix.

Feature Spotlight: The Code-to-Diagram Tool

Visualizing software architecture, flowcharts, or system designs can be a time-consuming process. To solve this for our audience, we built a dedicated Code-to-Diagram computing tool. Instead of manually drawing shapes, this utility allows users to write clear, standard code descriptions and instantly render them into highly accurate system diagrams.

Migrating Content Safely in Plone

To bring this live, our first task was migrating the staging environment data over to our production cluster. Because our core platform runs on Plone, content is managed via a robust object database.

• We handled this by systematically exporting the structure from our isolated staging path (tools/computing-tools/code-to-diagram) as an independent data package.

• This package was safely imported into our live environment, ensuring that the layout, routing, and metadata remained perfectly intact without disrupting any adjacent educational tools.

Behind the Scenes: Server Infrastructure Upgrades

A dynamic rendering tool requires heavy-lifting on the backend. The Plone and Python web layers cannot draw these complex structures entirely on their own; they rely on specific system-level binary dependencies.

1. Managing Isolated Python Dependencies

To keep our production platform highly stable, we isolate dependencies using Python virtual environments (venv). For this deployment, we updated our Python environment to integrate the core diagrams library. This package allows Python scripts to interpret structured layout instructions and map them out as visual nodes and connections.

2. Provisioning the OS-Level Rendering Engine

The diagrams package relies entirely on Graphviz—an open-source graph visualization software—to actually calculate coordinates and export clean image files. Because Graphviz runs at the system level rather than inside Python, we had to update our underlying server package lists and provision the system-wide binaries directly onto the cloud instance.

3. Reusing Shared Logic

To keep our codebase clean and maintainable, we avoided writing custom utility logic from scratch. Instead, we pulled down our universal JavaScript utilities from our internal common utils repository. This gives the frontend components instant access to our standardized, cross-browser helper functions.

UX Polish: Solving the "Copy Button" Clipboard Trapping

While implementing the tool, we tracked down a small but incredibly annoying interface bug present on our existing code blocks (pre HTML tags).

The Problem

Many of our articles feature copy-and-pasteable code snippets accompanied by a handy "Copy" button. However, the existing JavaScript selector was capturing the entire text node container. When a user pasted their code into an IDE, they discovered that the literal word "Copy" from the button text was accidentally glued directly onto their code snippet, causing immediate syntax syntax errors.

// What users used to get:
Copyimport diagrams
...

The Fix

We refactored the action handling logic. The JavaScript function was updated to isolate the target code node away from the interactive button element container. Now, when a user triggers the action, the script explicitly grabs only the inner text content of the target block, completely masking out the button UI elements. Your clipboard now receives pure, executable code.

Key Takeaways

• Keep System Binaries Separate: When working with Python web applications, always remember that libraries requiring underlying OS tools (like Graphviz) require a two-part installation: the virtual environment package and the system package manager updates.

• Isolate UI Text from Data Text: When creating helper buttons inside text blocks, ensure your DOM selectors point precisely to the data container node rather than a generic parent container, protecting the user's clipboard integrity.