Add mermaid.js to the application including integration to the Document

[dominiqueduclayan]

• [x] Create a component that renders Mermaid.js Diagram
• The component takes the user inputs
• The user input is sent to GPT
• GPT sends the data to MermaidJS
• MermaidJS creates the Diagram
• [x] The diagram should contain the matching images for each of the components that was used
• [x] Save the image that was created
• [x] Final Document can access the document to be rendered in the Document

[dominiqueduclayan]

User Category named Architecture Diagram

1. Add 'Architecture Diagram' as one of the Categories
2. The page should have the following:
   • [x] Input Text Box A question asking users to describe the system architecture.
   • [x] Dropdown boxes for multiple examples from above, which will be copied into the input field with some delay.
   • [x] Generate Button that allows to generate the Mermaid JS
   • [x] Image Diagram of MermaidJS
   • [x] Save Button allows to save the the Mermaid JS Image to our Backend Currently

Drop Down Boxes When the user clicks the option, this will be reflected to the input box

• The dropdown is shown with 3 different options
• When the user clicks the text is sent to the input box
• The input box uses this as a text
  3. Create a MermaidDiagram Component
• [x] Props : graphText
• [x] Return a rendered Diagram

[dominiqueduclayan]

Quadrant Chart for Maturity Assessment / business process of the business Place for each type of diagram Sequency - Authorization Gannt Diagram Git Diagram Pi Diagram : Security Survey ( Create a Pi diagram to give results of a security survey, how many are satisfied or concerned with intrussions)

[duclayan]

Improve Error Handling of MermaidJS

To address the issue of GPT not always generating correct Mermaid.js code for a web application that generates diagrams from user text input, you can implement a multi-step approach:

1. Initial GPT-based generation: • Use GPT to generate an initial Mermaid.js code based on the user's text input.
2. Syntax validation: • Implement a Mermaid.js syntax validator to check the generated code for errors. • You can use libraries like mermaid.js itself or a separate validator.
3. Error correction: • If errors are detected, use GPT again to attempt to fix the code based on the error messages. • Provide the original input, the generated code, and the error message to GPT for correction.
4. Fallback options: • If multiple attempts fail, offer simpler diagram types or templates. • Provide users with an option to manually edit the generated code.
5. User feedback loop: • Allow users to report issues or suggest improvements. • Use this feedback to fine-tune your GPT prompts over time.
6. Caching and learning: • Store successful generations to build a database of correct examples. • Use these examples to improve future generations.
7. Hybrid approach: • Combine GPT-generated code with pre-defined templates for common diagram structures.
8. Real-time preview: • Implement a live preview of the diagram as the code is being generated or edited.
9. Alternative diagram libraries: • Consider using more forgiving libraries like PlantUML as a fallback option.
10. Custom post-processing: • Develop custom scripts to correct common GPT-generated errors in Mermaid.js syntax. By implementing these strategies, you can create a more robust system that handles the inconsistencies in GPT-generated Mermaid.js code, providing users with a smoother experience when creating diagrams from text input.