I am creating a Chainlit app, and instructing the model to provide some Mermaid diagrams as well. I am instructing the model to give the diagrams in this way in the system prompt, system_prompt = """ ... ... ### Mermaid Diagram Format: Always wrap Mermaid code in triple backticks with 'mermaid' language identifier: ```mermaid graph TD A[Start] --> B[Process] B --> C[End] ... ... So, the model gives the response also in the same way, but the Chainlit is rendering this as default code block, not as Mermaid diagram. This same app with the same system prompt was working very fine (rendering Mermaids perfectly) in an Streamlit app. I tried, enabling latex from the config.toml and creating a custom chainlit component to render mermaid. Nothing worked. How to fix this? Continue reading...
