@lexibase/rdx-ui 3.0.0 → 3.1.0

package/src/components/mdx-code-block.tsx

@@ -9,6 +9,8 @@ import {
 import { getMessages } from '../lib/i18n'
 import { CodeBlockLine } from './code-block'
 import { MdxCodeBlockView } from './mdx-code-block-view'
+import { MdxFolderTree } from './mdx-folder-tree'
+import { MdxMermaid } from './mdx-mermaid'
 
 function textOf(children: ReactNode): string {
   return Children.toArray(children)
@@ -47,8 +49,16 @@ export function MdxCodeBlock({
   lang,
   children,
   'data-rdx-code-mode': mode,
+  'data-rdx-code-title': title,
+  'data-rdx-code-line-numbers': numbered,
+  'data-rdx-code-start-line': firstLine,
   ...props
-}: ComponentProps<'pre'> & { 'data-rdx-code-mode'?: 'folder' | 'diff' }) {
+}: ComponentProps<'pre'> & {
+  'data-rdx-code-mode'?: 'folder' | 'diff' | 'mermaid'
+  'data-rdx-code-title'?: string
+  'data-rdx-code-line-numbers'?: string
+  'data-rdx-code-start-line'?: string
+}) {
   const messages = getMessages(lang)
   const code = Children.toArray(children).find((child) => isValidElement(child))
   const codeProps = isValidElement<{
@@ -59,42 +69,85 @@ export function MdxCodeBlock({
     : undefined
   const language = codeProps?.className?.match(/(?:^|\s)language-([^\s]+)/)?.[1]
   const value = textOf(codeProps?.children ?? children)
+  if (mode === 'mermaid' || language?.toLowerCase() === 'mermaid') {
+    return (
+      <MdxMermaid
+        value={value}
+        title={title}
+        lineNumbers={numbered === 'true'}
+        startLine={firstLine === undefined ? undefined : Number(firstLine)}
+        preProps={props}
+      />
+    )
+  }
   const label =
-    mode === 'folder' ? messages.folderTree : (language ?? messages.code)
+    title ||
+    (mode === 'folder' ? messages.folderTree : (language ?? messages.code))
+  const lineNumbers = numbered === 'true'
+  const raw = codeProps?.children ?? children
+  const nodes = Children.toArray(raw)
+  type LineProps = {
+    children?: ReactNode
+    className?: string
+    'data-rdx-line-variant'?: string
+  }
+  const lines = nodes.filter(
+    (node) =>
+      isValidElement<LineProps>(node) &&
+      (node.props['data-rdx-line-variant'] ||
+        node.props.className?.split(/\s+/).includes('line'))
+  )
+  const lastLine = lines.at(-1)
   const content =
-    mode === 'diff'
-      ? Children.map(codeProps?.children, (node) => {
-          if (
-            !isValidElement<{
-              children?: ReactNode
-              'data-rdx-line-variant'?: string
-            }>(node)
-          )
-            return node
-          const variant = node.props['data-rdx-line-variant']
-          if (!variant) return node
-          return (
-            <CodeBlockLine
-              variant={
-                variant === 'added' || variant === 'removed'
-                  ? variant
-                  : variant === 'hunk'
-                    ? 'highlighted'
-                    : 'default'
-              }
-            >
-              {variant === 'added' || variant === 'removed'
-                ? withoutMarker(node.props.children)
-                : node.props.children}
-            </CodeBlockLine>
-          )
-        })
-      : (codeProps?.children ?? children)
+    mode === 'folder' ? (
+      <MdxFolderTree value={value} />
+    ) : (mode === 'diff' || lineNumbers) && typeof raw !== 'string' ? (
+      nodes.map((node) => {
+        if (lineNumbers && node === '\n') return null
+        if (!isValidElement<LineProps>(node)) return node
+        const variant = node.props['data-rdx-line-variant']
+        if (
+          !variant &&
+          !(lineNumbers && node.props.className?.split(/\s+/).includes('line'))
+        )
+          return node
+        // A final newline terminates the last source line; intentional blank
+        // lines before it still receive the official component's own number.
+        if (
+          lineNumbers &&
+          lines.length > 1 &&
+          node === lastLine &&
+          value.endsWith('\n') &&
+          textOf(node.props.children) === ''
+        )
+          return null
+        return (
+          <CodeBlockLine
+            key={node.key}
+            variant={
+              variant === 'added' || variant === 'removed'
+                ? variant
+                : variant === 'hunk'
+                  ? 'highlighted'
+                  : 'default'
+            }
+          >
+            {variant === 'added' || variant === 'removed'
+              ? withoutMarker(node.props.children)
+              : node.props.children}
+          </CodeBlockLine>
+        )
+      })
+    ) : (
+      raw
+    )
   return (
     <MdxCodeBlockView
       label={label}
       mode={mode}
       value={value}
+      lineNumbers={lineNumbers}
+      startLine={firstLine === undefined ? undefined : Number(firstLine)}
       preProps={{
         ...props,
         className: [props.className, language && `language-${language}`]

package/src/components/mdx-components.tsx

@@ -105,10 +105,7 @@ export const mdxComponents = {
     />
   ),
   a: ({ className, children, ...props }: ComponentProps<'a'>) => (
-    <a
-      className={cn('underline text-chart-1 text-blue-500', className)}
-      {...props}
-    >
+    <a className={cn('underline text-rdx-highlighting', className)} {...props}>
       {linkedImages(children)}
     </a>
   ),

package/src/components/mdx-folder-tree.tsx

@@ -0,0 +1,58 @@
+import {
+  File,
+  FileCode2,
+  FileImage,
+  FileJson,
+  FileText,
+  Folder,
+} from 'lucide-react'
+
+import { CodeBlockLine } from './code-block'
+
+function entryIcon(name: string) {
+  if (name.endsWith('/')) return { Icon: Folder, kind: 'folder' }
+  const extension = name.includes('.')
+    ? name.split('.').at(-1)?.toLowerCase()
+    : undefined
+  if (extension === 'json' || extension === 'jsonc')
+    return { Icon: FileJson, kind: 'json' }
+  if (extension && /^(?:png|jpe?g|gif|webp|svg|avif|ico|bmp)$/.test(extension))
+    return { Icon: FileImage, kind: 'image' }
+  if (extension && /^(?:mdx?|txt|log|rst)$/.test(extension))
+    return { Icon: FileText, kind: 'text' }
+  if (
+    extension &&
+    /^(?:[cm]?[jt]sx?|html|css|scss|vue|svelte|py|rb|go|rs|java|c|cpp|h|cs|php|sql|sh|bash|ya?ml|toml)$/.test(
+      extension
+    )
+  )
+    return { Icon: FileCode2, kind: 'code' }
+  return { Icon: File, kind: 'file' }
+}
+
+/** Decorate generated text with icons inside the official shadcn line component. */
+export function MdxFolderTree({ value }: { value: string }) {
+  const trailingNewline = value.endsWith('\n')
+  const lines = value.replace(/\n$/, '').split('\n')
+  return lines.map((line, index) => {
+    const match = line.match(/^([ │\t]*(?:├──|└──)\s*)(.*)$/)
+    const prefix = match?.[1] ?? line.match(/^[ │\t]*/)?.[0] ?? ''
+    const name = match?.[2] ?? line.slice(prefix.length)
+    const { Icon, kind } = entryIcon(name)
+    return (
+      <CodeBlockLine key={index} data-rdx-folder-kind={name ? kind : undefined}>
+        {prefix && <span aria-hidden="true">{prefix}</span>}
+        {name && (
+          <>
+            <Icon
+              aria-hidden="true"
+              className="mr-1.5 inline-block size-3.5 align-[-2px] text-muted-foreground"
+            />
+            {name}
+          </>
+        )}
+        {index < lines.length - 1 || trailingNewline ? '\n' : null}
+      </CodeBlockLine>
+    )
+  })
+}

package/src/components/mdx-mermaid.tsx

@@ -0,0 +1,252 @@
+'use client'
+
+import {
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ComponentProps,
+} from 'react'
+import { useTheme } from 'next-themes'
+import {
+  CodeXml,
+  Eye,
+  Maximize2,
+  RotateCw,
+  Workflow,
+  WrapText,
+} from 'lucide-react'
+
+import { renderMermaid } from '../lib/mermaid'
+import { useMessages } from '../providers/locale-provider'
+import { Button } from './button'
+import {
+  CodeBlock,
+  CodeBlockActions,
+  CodeBlockContent,
+  CodeBlockCopyButton,
+  CodeBlockHeader,
+  CodeBlockTitle,
+} from './code-block'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogTitle,
+  DialogTrigger,
+} from './dialog'
+
+/** A Mermaid fence adapts the existing shadcn Code Block and Dialog. */
+export function MdxMermaid({
+  value,
+  title,
+  lineNumbers,
+  startLine,
+  preProps,
+}: {
+  value: string
+  title?: string
+  lineNumbers?: boolean
+  startLine?: number
+  preProps: ComponentProps<'pre'>
+}) {
+  const messages = useMessages()
+  const { resolvedTheme } = useTheme()
+  const block = useRef<HTMLDivElement>(null)
+  const [visible, setVisible] = useState(false)
+  const [sourceView, setSourceView] = useState(false)
+  const [wrap, setWrap] = useState(false)
+  const [attempt, setAttempt] = useState(0)
+  const [result, setResult] = useState<{
+    source: string
+    theme: string
+    svg?: string
+    error?: boolean
+  }>()
+  const current =
+    result?.source === value && result.theme === resolvedTheme
+      ? result
+      : undefined
+  const svg = current?.svg
+  const error = current?.error
+  const image = svg
+    ? `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`
+    : undefined
+  const description = useMemo(() => {
+    if (!svg) return title || messages.diagram
+    const document = new DOMParser().parseFromString(svg, 'image/svg+xml')
+    return [
+      title || document.querySelector('title')?.textContent || messages.diagram,
+      document.querySelector('desc')?.textContent,
+    ]
+      .filter(Boolean)
+      .join('. ')
+  }, [svg, title, messages.diagram])
+  const label = title || 'Mermaid'
+  const showSource = sourceView || !svg
+
+  useEffect(() => {
+    const element = block.current
+    if (!element) return
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries.some((entry) => entry.isIntersecting)) {
+          setVisible(true)
+          observer.disconnect()
+        }
+      },
+      { rootMargin: '200px' }
+    )
+    observer.observe(element)
+    return () => observer.disconnect()
+  }, [])
+
+  useEffect(() => {
+    if (!visible || !resolvedTheme) return
+    let active = true
+    const theme = resolvedTheme
+    void renderMermaid(value, theme === 'dark', () => active).then(
+      (svg) => {
+        if (active && svg) setResult({ source: value, theme, svg })
+      },
+      () => {
+        if (active) setResult({ source: value, theme, error: true })
+      }
+    )
+    return () => {
+      active = false
+    }
+  }, [value, resolvedTheme, visible, attempt])
+
+  return (
+    <CodeBlock
+      ref={block}
+      size="sm"
+      data-rdx-code-block
+      data-rdx-code-mode="mermaid"
+      data-rdx-code-value={value}
+      className="my-4 max-w-full"
+    >
+      <CodeBlockHeader>
+        <CodeBlockTitle title={label}>
+          <Workflow aria-hidden="true" /> {label}
+        </CodeBlockTitle>
+        <CodeBlockActions>
+          {svg && (
+            <Button
+              variant="ghost"
+              size="icon-xs"
+              aria-label={
+                sourceView ? messages.showDiagram : messages.showDiagramSource
+              }
+              title={
+                sourceView ? messages.showDiagram : messages.showDiagramSource
+              }
+              aria-pressed={sourceView}
+              onClick={() => setSourceView(!sourceView)}
+            >
+              {sourceView ? (
+                <Eye aria-hidden="true" />
+              ) : (
+                <CodeXml aria-hidden="true" />
+              )}
+            </Button>
+          )}
+          {image && (
+            <Dialog>
+              <DialogTrigger
+                render={<Button variant="ghost" size="icon-xs" />}
+                aria-label={messages.enlargeDiagram}
+                title={messages.enlargeDiagram}
+              >
+                <Maximize2 aria-hidden="true" />
+              </DialogTrigger>
+              <DialogContent
+                data-rdx-mermaid-dialog
+                className="flex max-h-[calc(100dvh-2rem)] w-[calc(100vw-2rem)] max-w-6xl flex-col gap-2 sm:max-w-6xl"
+              >
+                <DialogTitle className="pr-8">
+                  {title || messages.diagram}
+                </DialogTitle>
+                <DialogDescription className="sr-only">
+                  {messages.imagePreviewDescription}
+                </DialogDescription>
+                <div
+                  role="region"
+                  aria-label={messages.diagram}
+                  tabIndex={0}
+                  className="min-h-0 overflow-auto rounded-md p-2 outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                >
+                  <img
+                    src={image}
+                    alt={description}
+                    className="mx-auto h-auto max-w-none"
+                  />
+                </div>
+              </DialogContent>
+            </Dialog>
+          )}
+          {error && (
+            <Button
+              variant="ghost"
+              size="icon-xs"
+              aria-label={messages.tryAgain}
+              title={messages.tryAgain}
+              onClick={() => setAttempt(attempt + 1)}
+            >
+              <RotateCw aria-hidden="true" />
+            </Button>
+          )}
+          {showSource && (
+            <Button
+              variant="ghost"
+              size="icon-xs"
+              className="md:hidden"
+              aria-label={messages.wrapCode}
+              title={messages.wrapCode}
+              aria-pressed={wrap}
+              onClick={() => setWrap(!wrap)}
+            >
+              <WrapText aria-hidden="true" />
+            </Button>
+          )}
+          <CodeBlockCopyButton value={value} />
+        </CodeBlockActions>
+      </CodeBlockHeader>
+      {error && (
+        <p role="status" className="px-3 pt-2 text-xs text-muted-foreground">
+          {messages.diagramError}
+        </p>
+      )}
+      {!current && visible && (
+        <p role="status" className="px-3 pt-2 text-xs text-muted-foreground">
+          {messages.diagramLoading}
+        </p>
+      )}
+      {showSource ? (
+        <CodeBlockContent
+          {...preProps}
+          wrap={wrap}
+          lineNumbers={lineNumbers}
+          startLine={startLine}
+        >
+          {value}
+        </CodeBlockContent>
+      ) : (
+        <div
+          role="region"
+          aria-label={title || messages.diagram}
+          tabIndex={0}
+          data-rdx-mermaid-preview
+          className="min-w-0 overflow-auto p-4 outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"
+        >
+          <img
+            src={image}
+            alt={description}
+            className="mx-auto h-auto max-w-full"
+          />
+        </div>
+      )}
+    </CodeBlock>
+  )
+}

package/src/components/sheet.tsx

@@ -0,0 +1,146 @@
+'use client'
+
+import * as React from 'react'
+import { Dialog as SheetPrimitive } from '@base-ui/react/dialog'
+import { cn, mergeStateClassName } from '../lib/utils'
+import { useMessages } from '../providers/locale-provider'
+
+import { Button } from './button'
+import { XIcon } from 'lucide-react'
+
+function Sheet({ ...props }: SheetPrimitive.Root.Props) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />
+}
+
+function SheetTrigger({ ...props }: SheetPrimitive.Trigger.Props) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
+}
+
+function SheetClose({ ...props }: SheetPrimitive.Close.Props) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
+}
+
+function SheetPortal({ ...props }: SheetPrimitive.Portal.Props) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
+}
+
+function SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {
+  return (
+    <SheetPrimitive.Backdrop
+      data-slot="sheet-overlay"
+      className={mergeStateClassName(
+        'fixed inset-0 z-50 bg-black/10 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs motion-reduce:transition-none',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SheetContent({
+  className,
+  children,
+  side = 'right',
+  showCloseButton = true,
+  closeLabel,
+  portalProps,
+  ...props
+}: SheetPrimitive.Popup.Props & {
+  side?: 'top' | 'right' | 'bottom' | 'left'
+  showCloseButton?: boolean
+  closeLabel?: string
+  portalProps?: SheetPrimitive.Portal.Props
+}) {
+  const messages = useMessages()
+  return (
+    <SheetPortal {...portalProps}>
+      <SheetOverlay />
+      <SheetPrimitive.Popup
+        data-slot="sheet-content"
+        data-side={side}
+        className={mergeStateClassName(
+          'fixed z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm motion-reduce:transition-none',
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <SheetPrimitive.Close
+            data-slot="sheet-close"
+            render={
+              <Button
+                variant="ghost"
+                className="absolute top-3 right-3"
+                size="icon-sm"
+              />
+            }
+          >
+            <XIcon aria-hidden="true" />
+            <span className="sr-only">{closeLabel ?? messages.close}</span>
+          </SheetPrimitive.Close>
+        )}
+      </SheetPrimitive.Popup>
+    </SheetPortal>
+  )
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn('flex flex-col gap-0.5 p-4', className)}
+      {...props}
+    />
+  )
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn('mt-auto flex flex-col gap-2 p-4', className)}
+      {...props}
+    />
+  )
+}
+
+function SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={mergeStateClassName(
+        'cn-font-heading text-base font-medium text-foreground',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SheetDescription({
+  className,
+  ...props
+}: SheetPrimitive.Description.Props) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={mergeStateClassName(
+        'text-sm text-muted-foreground',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}

package/src/components/tabs.tsx

@@ -144,6 +144,7 @@ function Tabs({ className, ...props }: TabsPrimitive.Root.Props) {
 }
 
 function TabsList({ className, ...props }: TabsPrimitive.List.Props) {
+  const messages = useMessages()
   return (
     <div
       data-slot="tabs-header"
@@ -151,6 +152,9 @@ function TabsList({ className, ...props }: TabsPrimitive.List.Props) {
     >
       <TabsPrimitive.List
         data-slot="tabs-list"
+        aria-label={
+          props['aria-labelledby'] ? undefined : messages.documentationTabs
+        }
         className={mergeStateClassName(
           'flex min-w-0 flex-1 gap-0.5 overflow-x-auto p-1.5 data-[orientation=vertical]:flex-col',
           className
@@ -167,7 +171,7 @@ function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
     <TabsPrimitive.Tab
       data-slot="tabs-trigger"
       className={mergeStateClassName(
-        'relative shrink-0 rounded-md border border-transparent px-2.5 py-1 text-sm font-medium whitespace-nowrap text-muted-foreground transition-colors hover:bg-muted/60 hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring data-active:border-border data-active:bg-background data-active:text-foreground data-active:shadow-xs data-disabled:cursor-not-allowed data-disabled:opacity-50 data-disabled:hover:bg-transparent data-disabled:hover:text-muted-foreground motion-reduce:transition-none',
+        'relative shrink-0 rounded-md border border-transparent px-2.5 py-1 text-sm font-medium whitespace-nowrap text-muted-foreground transition-colors hover:bg-muted/60 hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring data-active:border-border data-active:bg-background data-active:text-rdx-selected data-active:shadow-xs data-disabled:cursor-not-allowed data-disabled:opacity-50 data-disabled:hover:bg-transparent data-disabled:hover:text-muted-foreground motion-reduce:transition-none',
         className
       )}
       {...props}

package/src/lib/i18n.ts

@@ -32,15 +32,25 @@ const en = {
     'Press Escape or use the close button to return to the document.',
   copyCode: 'Copy code',
   wrapCode: 'Wrap lines',
+  showMore: 'Show more',
+  showLess: 'Show less',
   codeCopied: 'Code copied to clipboard.',
   copyCodeError: 'Could not copy. Select the code and copy it manually.',
   copyRetry: 'Could not copy. Try again or copy manually.',
   copied: 'Copied!',
   copyTab: 'Copy active tab',
+  documentationTabs: 'Documentation tabs',
   tabCopied: 'Tab content copied to clipboard.',
   copyTabError: 'Could not copy. Select the tab content and copy it manually.',
   code: 'Code',
   folderTree: 'Folder',
+  diagram: 'Diagram',
+  showDiagram: 'Show diagram',
+  showDiagramSource: 'Show diagram source',
+  enlargeDiagram: 'Enlarge diagram',
+  diagramLoading: 'Rendering diagram…',
+  diagramError:
+    'Could not render this diagram. Check the Mermaid source below.',
   table: 'Table',
   current: 'Current',
   version: 'Version {version}',
@@ -101,17 +111,27 @@ const ptBR = {
     'Pressione Escape ou use o botão de fechar para voltar ao documento.',
   copyCode: 'Copiar código',
   wrapCode: 'Quebrar linhas',
+  showMore: 'Mostrar mais',
+  showLess: 'Mostrar menos',
   codeCopied: 'Código copiado para a área de transferência.',
   copyCodeError:
     'Não foi possível copiar. Selecione o código e copie manualmente.',
   copyRetry: 'Não foi possível copiar. Tente novamente ou copie manualmente.',
   copied: 'Copiado!',
   copyTab: 'Copiar aba ativa',
+  documentationTabs: 'Abas da documentação',
   tabCopied: 'Conteúdo da aba copiado para a área de transferência.',
   copyTabError:
     'Não foi possível copiar. Selecione o conteúdo da aba e copie manualmente.',
   code: 'Código',
   folderTree: 'Pastas',
+  diagram: 'Diagrama',
+  showDiagram: 'Mostrar diagrama',
+  showDiagramSource: 'Mostrar código do diagrama',
+  enlargeDiagram: 'Ampliar diagrama',
+  diagramLoading: 'Renderizando diagrama…',
+  diagramError:
+    'Não foi possível renderizar o diagrama. Confira o código Mermaid abaixo.',
   table: 'Tabela',
   current: 'Atual',
   version: 'Versão {version}',