{"schemaVersion":1,"id":"2026-10-16-code-block-diagrams","status":"draft","source":{"kind":"entry-mdx","path":"apps/www/src/registry/changelog/entries/2026-10-16-code-block-diagrams.mdx"},"change":{"type":"source","date":"2026-10-16","commits":[]},"release":{"status":"unresolved"},"kind":"new","summary":"Draw diagrams in code blocks","targets":[{"name":"code-block-diagram","files":["apps/www/src/registry/components/editor/code-block-diagram.tsx"],"definitionFiles":["apps/www/src/registry/registry-features.ts"],"diagnostics":[]},{"name":"code-block-diagram-mermaid","files":["apps/www/src/registry/components/editor/code-block-diagram-mermaid.ts"],"definitionFiles":["apps/www/src/registry/registry-features.ts"],"diagnostics":[]},{"name":"code-block-diagram-graphviz","files":["apps/www/src/registry/components/editor/code-block-diagram-graphviz.ts"],"definitionFiles":["apps/www/src/registry/registry-features.ts"],"diagnostics":[]},{"name":"code-block-diagram-flowchart","files":["apps/www/src/registry/components/editor/code-block-diagram-flowchart.ts"],"definitionFiles":["apps/www/src/registry/registry-features.ts"],"diagnostics":[]},{"name":"code-block-diagram-plantuml","files":["apps/www/src/registry/components/editor/code-block-diagram-plantuml.ts"],"definitionFiles":["apps/www/src/registry/registry-features.ts"],"diagnostics":[]},{"name":"code-block","files":["apps/www/src/registry/components/editor/code-block-lowlight.ts","apps/www/src/registry/components/editor/code-block.tsx"],"definitionFiles":["apps/www/src/registry/registry-features.ts"],"diagnostics":[]},{"name":"code-block-codemirror","files":["apps/www/src/registry/components/editor/code-block-codemirror.tsx"],"definitionFiles":["apps/www/src/registry/registry-features.ts"],"diagnostics":[]},{"name":"insert-toolbar-button","files":["apps/www/src/registry/components/editor/insert-toolbar-button.tsx"],"definitionFiles":["apps/www/src/registry/registry-editor.ts"],"diagnostics":[]},{"name":"slash","files":["apps/www/src/registry/components/editor/slash.tsx"],"definitionFiles":["apps/www/src/registry/registry-features.ts"],"diagnostics":[]},{"name":"indent","files":["apps/www/src/registry/components/editor/indent.tsx"],"definitionFiles":["apps/www/src/registry/registry-features.ts"],"diagnostics":[]},{"name":"indent-static","files":["apps/www/src/registry/components/editor/indent-static.tsx"],"definitionFiles":["apps/www/src/registry/registry-features.ts"],"diagnostics":[]},{"name":"editor-plugins-static","files":["apps/www/src/registry/components/editor/plugins-static.ts"],"definitionFiles":["apps/www/src/registry/registry-features.ts"],"diagnostics":[]}],"entries":[{"id":"2026-10-16-code-block-diagram-draw-diagrams-blocks-77929476","kind":"new","summary":"Draw the picture of a code block in a diagram language below its source. `withDiagrams` wraps `CodeBlockElement` or `CodeBlockCodeMirrorElement` with the renderers you pass, the toolbar switches between Code and Both and exports a PNG, and the PlantUML renderer sends source only to the server you configure. The Mermaid renderer draws with Pele.","details":[],"migrationNotes":[],"targets":["code-block-diagram","code-block-diagram-mermaid","code-block-diagram-graphviz","code-block-diagram-flowchart","code-block-diagram-plantuml"],"source":{"line":14,"row":1,"legacyRelease":{"date":"2026-10-16","entry":"2026-10-16-code-block-diagrams","section":null}}},{"id":"2026-10-16-code-block-addon-prop-4f0d2c61","kind":"new","summary":"Add an `addon` prop that adds language options, toolbar controls and content around the source, so a wrapper such as `withDiagrams` extends the copied component without editing it.","details":[],"migrationNotes":[],"targets":["code-block","code-block-codemirror"],"source":{"line":18,"row":2,"legacyRelease":{"date":"2026-10-16","entry":"2026-10-16-code-block-diagrams","section":null}}},{"id":"2026-10-16-remove-code-drawing-items-9b3e7a05","kind":"remove","summary":"Remove the Code Drawing menu entries, indent target and static kit, and remove the `code-drawing` and `code-drawing-static` items and the `code-drawing-demo` example.","details":[],"migrationNotes":["Replace the code-drawing items with code-block-diagram and a renderer item per engine; migrateV54 turns saved drawings into code blocks."],"targets":["insert-toolbar-button","slash","indent","indent-static","editor-plugins-static"],"source":{"line":22,"row":3,"legacyRelease":{"date":"2026-10-16","entry":"2026-10-16-code-block-diagrams","section":null}}}],"diagnostics":[]}