Upload index.html

index.html

@@ -238,6 +238,37 @@
                 <p>Here, we present the Programming Framework, a systematic methodology that translates complex system dynamics into standardized computational representations using Mermaid Markdown syntax and LLM processing.</p>
             </div>
 
+            <div class="overview">
+                <h2>Technical Foundation: Mermaid Markdown</h2>
+                
+                <h3 style="color: #667eea; margin: 20px 0 15px 0; font-size: 1.4rem;">The Invention of Mermaid</h3>
+                <p><strong>Knut Sveidqvist</strong> invented the Mermaid markdown format. He created Mermaid, a JavaScript-based diagramming and charting tool, to simplify diagram creation in documentation workflows. The project was inspired by his experience trying to update a diagram in a document, which was difficult due to the file format.</p>
+                
+                <p>Sveidqvist's innovation revolutionized how diagrams are created and maintained in documentation by providing a text-based syntax that can be version-controlled, easily edited, and automatically rendered into visual diagrams. This approach eliminates the need for external diagramming tools and ensures diagrams stay synchronized with their documentation.</p>
+                
+                <h3 style="color: #667eea; margin: 20px 0 15px 0; font-size: 1.4rem;">Mermaid Markdown (.mmd) Format</h3>
+                <p>The Programming Framework leverages Mermaid's <code>.mmd</code> file format, which provides:</p>
+                <ul style="margin: 15px 0; padding-left: 30px;">
+                    <li><strong>Text-based syntax</strong> for creating complex flowcharts and diagrams</li>
+                    <li><strong>Version control compatibility</strong> - diagrams can be tracked in Git repositories</li>
+                    <li><strong>LLM-friendly format</strong> - AI systems can generate and modify diagram code</li>
+                    <li><strong>Cross-platform compatibility</strong> - works in any environment that supports JavaScript</li>
+                    <li><strong>Embeddable rendering</strong> - diagrams can be displayed in HTML, Markdown, and other formats</li>
+                </ul>
+                
+                <h3 style="color: #667eea; margin: 20px 0 15px 0; font-size: 1.4rem;">LLM Integration and Workflow</h3>
+                <p>Our methodology uses Large Language Models to:</p>
+                <ol style="margin: 15px 0; padding-left: 30px;">
+                    <li><strong>Generate .mmd files</strong> - LLMs create detailed Mermaid syntax for complex processes</li>
+                    <li><strong>Apply color coding</strong> - Systematic application of the 5-category color system</li>
+                    <li><strong>Ensure consistency</strong> - Standardized node naming and connection patterns</li>
+                    <li><strong>Embed in HTML</strong> - .mmd files are embedded in HTML for web display</li>
+                    <li><strong>Maintain quality</strong> - LLMs can validate and optimize diagram structure</li>
+                </ol>
+                
+                <p>This workflow enables rapid creation of sophisticated visualizations that would be impractical to create manually, while maintaining the flexibility and editability of text-based formats.</p>
+            </div>
+
             <div class="color-system">
                 <h2>Universal Color Coding System</h2>
                 <p style="text-align: center; margin-bottom: 20px; font-size: 1.1rem;">The framework uses a standardized five-color system across all disciplines:</p>
@@ -285,25 +316,25 @@
                     </div>
                     
                     <div class="resource-card">
-                        <h3>🧬 Biology Processes</h3>
-                        <p>Biological system analysis with GLMP integration and examples</p>
+                        <h3>🧬 Biology</h3>
+                        <p>Biological system analysis with GLMP integration</p>
                         <a href="biology_processes.html">Explore Biology</a>
                     </div>
                     
                     <div class="resource-card">
-                        <h3>⚗️ Chemistry Examples</h3>
-                        <p>Chemical reaction mechanisms and process visualizations</p>
-                        <a href="chemistry_examples.html">Explore Chemistry</a>
+                        <h3>⚗️ Chemistry</h3>
+                        <p>Chemical reaction mechanisms and visualizations</p>
+                        <a href="chemistry_processes.html">Explore Chemistry</a>
                     </div>
                     
                     <div class="resource-card">
                         <h3>💻 Computer Science</h3>
-                        <p>Algorithm and computational process analysis</p>
+                        <p>Algorithm and computational analysis</p>
                         <a href="computer_science_processes.html">Explore CS</a>
                     </div>
                     
                     <div class="resource-card">
-                        <h3>⚛️ Physics Processes</h3>
+                        <h3>⚛️ Physics</h3>
                         <p>Physical system dynamics and quantum processes</p>
                         <a href="physics_processes.html">Explore Physics</a>
                     </div>
@@ -323,7 +354,7 @@
                     <div class="resource-card">
                         <h3>🔬 GLMP Foundation</h3>
                         <p>Original biological systems analysis project</p>
-                        <a href="https://huggingface.co/spaces/garywelz/glmp">Visit GLMP</a>
+                        <a href="https://huggingface.co/spaces/garywelz/glmp" target="_blank">Visit GLMP</a>
                     </div>
                 </div>
             </div>