Back/Engineering/Claude Code
AdvancedEngineeringClaude Code

Improve AI Code Awareness with Mermaid Diagram Context

Boost your AI coding assistant's performance by preloading your application's architecture using text-based Mermaid diagrams. This gives the AI deep context, resulting in faster, more accurate code-related answers.

From How I AI

Beyond Vibe Coding: Advanced AI Engineering with John Lindquist

with Claire Vo

Improve AI Code Awareness with Mermaid Diagram Context

Tools Used

Claude Code

Claude for coding tasks

Step-by-Step Guide

1

Generate Application Diagrams

Create text-based Mermaid diagrams representing your application flows, database schemas, or user interactions. You can generate these from your existing codebase using an AI prompt or as part of your development lifecycle.

2

Organize Diagram Files

Store the Mermaid diagrams as markdown (.md) files in a dedicated directory within your project repository, for example: memory/ai/diagrams/.

3

Load Context via System Prompt

Use a terminal command to find all diagram files, concatenate them, and append them to your AI's system prompt. This loads the entire context at the start of your session.

Prompt:
claude append-system-prompt "$(cat memory/ai/diagrams/**/*.md)"
4

Query the AI with Full Context

Ask the AI complex questions about your codebase. The AI can now answer instantly without searching files, as the information is in its preloaded context.

Prompt:
please explain the authentication flow
Pro Tip: This method has a higher upfront token cost but saves time by eliminating the need for the AI to perform slow file searches during the session.

Become a 10x PM.
For just $15 / month.

We've made ChatPRD affordable so everyone from engineers to founders to Chief Product Officers can benefit from an AI PM.