DEV Community: Gabriela Paulini Deutner

Claude Artifacts: Code Isolation, Version Iteration, and Diagrams with Mermaid

Gabriela Paulini Deutner — Sun, 12 Jul 2026 00:59:57 +0000

Hello, devs! 😎

Have you ever used Artifacts in Claude?

An Artifact is a dedicated window right next to the chat where Claude renders "substantial" content (such as code, HTML, Markdown, SVG, Mermaid diagrams, React components, and more) instead of dumping everything right into the middle of the conversation.

If you use LLMs daily to program, document, or design software architectures, you know exactly where it hurts. It’s that feeling of getting lost in a mountain of text within the chat window. You ask for a script, and the model spits out 200 lines of code. You ask for a minor change, and here come another 200 lines, cluttering your screen and causing you to lose track of the conversation context.

To improve this experience, you can start using Claude's Artifacts. They split the screen into two parts: on the left, you keep the traditional chat to give commands, ask questions, and brainstorm ideas. On the right, a clean, isolated workspace opens up where the final file is created.

How to Enable It?

Go to Settings → Capabilities (or Feature Previews, depending on your plan) and ensure that Code execution and file creation (or Artifacts) is toggled on. It is available across all tiers (Free, Pro, Max, Team, Enterprise).

How Does Claude Decide to Isolate Content into an Artifact?

Claude automatically creates an Artifact when the content is long, self-contained, and reusable. For instance: a script with more than 20 lines, a complete document, an HTML page, or a diagram. Short or purely conversational content (like an explanation or a 5-line snippet) stays in the regular chat. If you want to force its creation, simply ask explicitly: "Put this in an artifact."

Each Artifact operates in isolation:

HTML/JS/CSS code runs in its own sandbox inside the window.

Markdown documents are treated as beautifully rendered text files.

Mermaid diagrams are compiled visually on the spot.

This means the Artifact's content never "pollutes" the rest of your conversation, and you can easily copy, download, or publish it separately.

The main supported types are: code, documents (Markdown/text), interactive HTML pages, SVG, React components, Mermaid diagrams, and even freshly generated PDFs and Office files (.docx, .pptx, .xlsx).

Iterating with Artifacts

You don't need to rewrite everything for every single adjustment!

How Does It Work in Practice?
Once the Artifact is created, you simply keep typing in the regular chat: "change the button color to blue," "add a column for the total," or "summarize the second paragraph." Claude updates the existing Artifact, and the window immediately reflects the latest changes.

Version Control: Every update generates a new version, accessible via a version selector (usually at the bottom of the Artifact window). You can jump back to previous versions without losing any work.

Inline Editing: For Markdown documents specifically, you can use targeted editing. Select the piece of text you want to change, click "Edit with Claude," and describe your modification. Claude will edit only that specific snippet, saving you from explaining the context all over again in the chat.

Branching Conversations: Editing an earlier message in the chat creates a new branch—a brand-new set of Artifacts associated with that version of the conversation, allowing you to explore alternative technical paths without destroying your previous work.

Pro Tip: Claude tends to be much more efficient (and precise) when you ask for incremental refinements instead of requesting to rewrite the entire Artifact from scratch every time. This preserves context history and reduces the risk of content truncation.

Visualization with Mermaid

Mermaid is a JavaScript-based diagramming and charting tool that uses Markdown-inspired text definitions. Claude renders these visually right inside the Artifact window.

How to Ask For It:
"Create a flowchart showing the order approval process, from the customer to payment."

"Draw a sequence diagram of the OAuth authentication between the client, auth server, and API."

"Turn this explanation into a mind map using Mermaid."

Claude writes the Mermaid code (text syntax), and the Artifact automatically compiles it into a visual diagram—meaning you don't even need to know the syntax yourself.

sequenceDiagram
    autonumber
    participant U as User
    participant C as Client (App)
    participant AS as Authorization Server
    participant API as API (Protected Resource)

    U->>C: Initiates login
    C->>AS: Redirects to /authorize<br/>(client_id, redirect_uri, scope, state)
    AS->>U: Displays login and consent screen
    U->>AS: Enters credentials and grants access
    AS->>C: Redirects with authorization_code<br/>(code, state)

    Note over C,AS: Code exchange for token

    C->>AS: POST /token<br/>(code, client_id, client_secret, redirect_uri)
    AS->>AS: Validates code and client credentials
    AS->>C: Returns access_token<br/>(+ refresh_token, expires_in)

    Note over C,API: Client accesses protected resource

    C->>API: GET /resource<br/>Authorization: Bearer access_token
    API->>AS: Validates access_token<br/>(introspection or local verification via JWKS)
    AS->>API: Token is valid (scopes, expiration)
    API->>C: Returns protected data

    Note over C,AS: When the token expires

    C->>AS: POST /token<br/>(grant_type=refresh_token, refresh_token)
    AS->>C: Returns new access_token

Once generated, you can iterate on it seamlessly just like code: "add a validation step between X and Y," "reverse the arrow directions," or "switch this to a sequence diagram instead of a flowchart."

Diagram Types that Mermaid (and Claude) Supports Well:

Flowcharts (flowchart or graph)
Sequence Diagrams (sequenceDiagram)
Class and Entity-Relationship Diagrams (classDiagram, erDiagram)
Gantt Charts (gantt)
Mind Maps (mindmap)
State Diagrams (stateDiagram)

If this article helped streamline your workflow or shed light on new ways to use Claude daily, share it with your dev friends or your engineering team who might still be wrestling with cluttered, generic chats!

Claude Code Artifacts

Liked it? You can find me on LinkedIn and GitHub:
gabideutner

Thanks for reading!

How Claude Projects Changed My Dev Routine

Gabriela Paulini Deutner — Sun, 12 Jul 2026 00:42:40 +0000

Hello Devs! 😎

If you work in software development, content creation, or data analysis, you’ve probably experienced this scenario: you open ChatGPT or Claude, spend ten minutes pasting code from three different files, throw in the API documentation, explain the entire context of your database, and only then ask your question.

In the very next response, the AI forgets half of what you sent, or you hit the message limit because you spent too many tokens just contextualizing the machine.

This endless "copying and pasting" has always been the biggest bottleneck when using Large Language Models (LLMs) for real-world projects. This is exactly why we need to talk about the expansion of the Context Window and the arrival of Claude Projects (available on Anthropic's Pro and Team plans).

After spending the last few weeks centralizing the entire development pipeline of a new feature inside Claude Projects, I decided to unpack this tool and explain how you can get the most out of it.

What Is the Expanded Context Window?

Before talking about Claude's interface, we need to understand the engineering behind it. Anthropic's biggest triumph with the Claude 3 and 3.5 family was the introduction of a massive 200k token context window (the equivalent of about 150,000 words or a full 500-page book).

For developers, think of the Context Window as the model's RAM.

Before, AIs had a very short memory. You would send a complex file, and after a few interactions, the model would start hallucinating or forgetting the premises defined at the beginning of the chat.

Now, with 200k tokens, you can drop the entire repository of a microservice, the official documentation of a third-party library, and the log history of an error. Claude can "see" all these connections simultaneously.

The secret isn't just the size, but the information retrieval capacity. Claude 3.5 Sonnet can find a specific detail hidden in the middle of thousands of lines of code with surgical precision.

Diving into Claude Projects in Practice

Released for Pro and Team users, this feature allows you to create isolated workspaces for specific goals. Instead of starting generic chats from scratch every time you open your browser, you create a "Project."

Inside it, three pillars sustain the experience:

1. Persistent Context (Project Knowledge)
You can upload text files, PDFs, spreadsheets, or code files (.go, .py, .json, etc.) that will remain permanently available for any new conversation you open within that project.

If you work with complex integrations (like e-commerce APIs or cached data flows), you only need to upload the technical specifications once. Every new question you ask will already take into account what you provided.

2. Custom Instructions per Project
Remember that old tip of starting every chat by saying: "Act as a Senior Software Engineer specializing in Go, focused on Clean Architecture, use commit convention X..."?

In Projects, you define these custom instructions once in the project settings. You can determine:

The tone of the response.

Strict code architecture rules (e.g., "Always isolate business rules in the repository and use dependency injection").

The default language for code comments.

3. Large-Scale Artifacts
Working with extensive code in a chat interface used to be chaotic. With Artifacts, Claude opens a dedicated window next to the chat to render code snippets, architecture diagrams, or web interfaces in real-time. You can see the code evolve without cluttering the conversation flow.

Real-World Case: How to Structure a Project Day-to-Day

To illustrate the power of this tool, imagine you are tasked with migrating an old API integration to a newer version.

Here is the ideal workflow using Claude Projects:

Create the space: You create a project named "Catalog API Migration."
Feed the base: In the Project Knowledge section, you upload the old payload (JSON), the PDF documentation of the new API, and your team's architecture guidelines.
Define the rules: In the project instructions, you write: "You are our tech lead. All generated code must follow the Repository Pattern and include mocked unit tests."
Execute! Now, you can open a chat and simply say: "Write the new adapter for the product registration endpoint."

Claude won't give you a generic tutorial code from the internet. It will read the new documentation you uploaded, look at the old structure to ensure data parity, and generate code structured exactly the way your team works.

Pro Plan vs. Team Plan

If you're wondering which plan makes sense for your reality, the split is quite clear. For independent developers or anyone looking to accelerate individual deliveries, the Pro plan has you covered. For engineering teams where everyone needs to consume the same governance rules and internal documentation, the Team plan quickly pays for itself by preventing communication noise and technical misalignment.

Is It Worth the Hype?

Generative AI tools are maturing, moving from the "fun text generators" phase to becoming true productivity platforms. Claude Projects, powered by a context window that actually withstands the process of real-world software projects, has set a new market standard.

It won't program by itself for you—nor should it. But the time saved by eliminating repetitive contextualization tasks and scope corrections is considerable. If you're still using LLMs in the traditional "isolated question and answer" format, give it a try by creating your first Project. There's no turning back for your workflow.

The infinite "Ctrl+C, Ctrl+V" is dead, whether you like it or not. The future of AI-driven development is contextual and organized.

If this article opened your mind to new ways of using Claude in your daily routine, share it with that dev friend or your company's team who is still struggling with generic chats!

Liked it? You can find me on LinkedIn and GitHub:
gabideutner

Thanks for reading!