@udx/md2html 1.0.0 → 1.1.0

package/README.md

@@ -101,6 +101,29 @@ Add captions to images with this syntax:
 *This is the image caption*
 ```
 
+### Mermaid Diagrams
+
+Create professional diagrams using Mermaid syntax:
+
+````markdown
+```mermaid
+flowchart LR
+    A[Client] --> B[Load Balancer]
+    B --> C[Server1]
+    B --> D[Server2]
+```
+````
+
+Supported Mermaid diagram types:
+- **Flowcharts**: Process flows and workflows
+- **Sequence Diagrams**: System interactions over time
+- **Gantt Charts**: Project timelines and schedules
+- **Entity Relationship Diagrams**: Database schemas
+- **User Journey**: User experience flows
+- **Git Graphs**: Version control workflows
+
+The diagrams are automatically rendered when the HTML document loads, with professional styling that matches the document theme.
+
 ## Customization
 
 This tool is designed to be easily customizable:

package/index.js

@@ -39,7 +39,7 @@
  * - Applies syntax highlighting to code blocks
  * - Supports watch mode for automatic rebuilding
  * 
- * @version 1.0.0
+ * @version 1.1.0
  * @author UDX Team
  * @copyright 2025
  */
@@ -86,7 +86,7 @@ const CHAPTER_NAV_STYLES_PATH = path.join(path.dirname(new URL(import.meta.url).
 const SCRIPTS_PATH = path.join(path.dirname(new URL(import.meta.url).pathname), 'static/scripts.js');
 
 program
-  .version('1.0.0')
+  .version('1.1.0')
   .description('Convert markdown files to a single HTML document with Google Docs styling')
   .option('-s, --src <directory>', 'Source directory containing markdown files')
   .option('-o, --out <file>', 'Output HTML file path')

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@udx/md2html",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Magazine-quality Markdown to HTML converter with professional styling",
   "main": "index.js",
   "type": "module",

package/static/view.hbs

@@ -48,6 +48,7 @@
   <script src="https://cdn.tailwindcss.com?plugins=typography"></script>
   <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
   <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/mermaid@10.6.1/dist/mermaid.min.js"></script>
   <script>
     tailwind.config = {
       theme: {
@@ -301,6 +302,30 @@
         });
       }
       
+      // Initialize Mermaid diagrams
+      if (window.mermaid) {
+        mermaid.initialize({
+          startOnLoad: true,
+          theme: 'default',
+          securityLevel: 'loose',
+          fontFamily: 'inherit'
+        });
+        
+        // Convert mermaid code blocks to diagrams
+        document.querySelectorAll('pre[data-file-type="mermaid"]').forEach((pre) => {
+          const code = pre.querySelector('code');
+          if (code) {
+            const mermaidDiv = document.createElement('div');
+            mermaidDiv.className = 'mermaid';
+            mermaidDiv.textContent = code.textContent;
+            pre.parentNode.replaceChild(mermaidDiv, pre);
+          }
+        });
+        
+        // Re-render after conversion
+        mermaid.init();
+      }
+      
       // Initialize the annotation system if available
       if (window.ScienceUsability && typeof ScienceUsability.init === 'function') {
         console.log('Initializing ScienceUsability annotation system...');