Astro 5.5 works on the interaction with diagram tools

Astro 5.5 has been released. In the new release, the JavaScript web framework offers, among other things, improved support for diagram tools and increased type safety. Hidden behind an experimental flag is a new feature for handling tags, which is set to become standard in the future.

Using diagram tools in Astro: Mermaid, D2 & Co.

Until now, the use of tools such as Mermaid and D2, which allow the definition of diagrams in code blocks in Markdown and their subsequent rendering within the content, was not easily possible in Astro. Syntax highlighting, which is used by default in Astro, stood in the way of rendering the code blocks, as the development team explains.

For this reason, Astro 5.5 includes the new option excludeLangs in the Markdown configuration to skip syntax highlighting for specific language code blocks. In the other code blocks, however, syntax highlighting remains in place.

The Astro team demonstrates this with an example: here, highlighting is deactivated for the mermaid language after the rehype-mermaid plug-in has been installed. This plug-in is used to render mermaid diagrams.

import { defineConfig } from 'astro/config';
import rehypeMermaid from 'rehype-mermaid';

export default defineConfig({
  markdown: {
    syntaxHighlight: {
      type: 'shiki',
      excludeLangs: ['mermaid', 'math'],
    },
    rehypePlugins: [rehypeMermaid],
  },
});

Diagrams can then be created directly within the Markdown content, which are rendered as a diagram on the website:

```mermaid
graph TD
    A[Start] --> B{Is it working?}
    B -->|Yes| C[Great!]
    B -->|No| D[Debug]
    D --> B
```

Read also

Textbasierte Werkzeuge für Entwickler im Vergleich: Von Code zu Diagrammen

Type safety for session data

The new release also enables TypeScript typing for session data to avoid any errors. Experimental support for session storage has been included since Astro 5.1, but session data was previously untyped. Now, developers can define the types of session data by extending the global App.SessionData interface in the src/env.d.ts file of a project:

declare namespace App {
  interface SessionData {
    user: {
      id: string;
      email: string;
    };
    lastLogin: Date;
  }
}

This optional feature is intended to help detect errors at development time, rather than at runtime.

New feature in the starting blocks: Maintaining tag order

A function for handling tags is to become standard in Astro in the future, and is currently still hidden behind a flag: experimental.preserveScriptOrder. Astro will then generate styles and scripts in the order in which they were defined.

Up to now, the default is that Astro reverses their order in the generated HTML output when rendering multiple <style> and <script> tags on the same page. This can lead to unexpected results, such as CSS styles being overwritten by earlier style tags.

Developers who have adapted their code to this behavior may need to change it for use with the new behavior if it becomes the default. With the experimental flag, the Astro team is already offering them the opportunity to test the impact on their code.

This and other new features in version 5.5 are covered in detail in an Astro blog entry.

JavaScript conference by Heise: enterJS 2025

enterJS 2025 will take place on May 7 and 8 in Mannheim. The conference offers a comprehensive look at the JavaScript-supported enterprise world. The focus is not only on the programming languages JavaScript and TypeScript themselves, but also on frameworks and tools, accessibility, practical reports, UI/UX and security.

Highlights from the program:

• Islands Architecture with Astro
• 4 critical anti-patterns in React/TypeScript development
• Hands-on workshop: Own AI agents with LangChain.js & LangGraph.js (workshop, May 6)

Tickets are available at an early bird price in the online store.

(mai)