diff --git a/public/app/features/plugins/sql/components/QueryEditor.tsx b/public/app/features/plugins/sql/components/QueryEditor.tsx
index 14274be3774..3556048483d 100644
--- a/public/app/features/plugins/sql/components/QueryEditor.tsx
+++ b/public/app/features/plugins/sql/components/QueryEditor.tsx
@@ -2,11 +2,11 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { useAsync } from 'react-use';
 
 import { QueryEditorProps } from '@grafana/data';
-import { Space } from '@grafana/experimental';
+import { EditorMode, Space } from '@grafana/experimental';
 
 import { SqlDatasource } from '../datasource/SqlDatasource';
 import { applyQueryDefaults } from '../defaults';
-import { SQLQuery, QueryRowFilter, SQLOptions, EditorMode } from '../types';
+import { SQLQuery, QueryRowFilter, SQLOptions } from '../types';
 import { haveColumns } from '../utils/sql.utils';
 
 import { QueryHeader } from './QueryHeader';
diff --git a/public/app/features/plugins/sql/components/QueryHeader.tsx b/public/app/features/plugins/sql/components/QueryHeader.tsx
index eab9bf3a517..d092ccc4172 100644
--- a/public/app/features/plugins/sql/components/QueryHeader.tsx
+++ b/public/app/features/plugins/sql/components/QueryHeader.tsx
@@ -2,11 +2,11 @@ import React, { useCallback, useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
 
 import { SelectableValue } from '@grafana/data';
-import { EditorField, EditorHeader, EditorRow, FlexItem, InlineSelect, Space } from '@grafana/experimental';
+import { EditorField, EditorHeader, EditorMode, EditorRow, FlexItem, InlineSelect, Space } from '@grafana/experimental';
 import { Button, InlineField, InlineSwitch, RadioButtonGroup, Select, Tooltip } from '@grafana/ui';
 
 import { QueryWithDefaults } from '../defaults';
-import { SQLQuery, QueryFormat, QueryRowFilter, QUERY_FORMAT_OPTIONS, DB, EditorMode } from '../types';
+import { SQLQuery, QueryFormat, QueryRowFilter, QUERY_FORMAT_OPTIONS, DB } from '../types';
 import { defaultToRawSql } from '../utils/sql.utils';
 
 import { ConfirmModal } from './ConfirmModal';
diff --git a/public/app/features/plugins/sql/datasource/SqlDatasource.ts b/public/app/features/plugins/sql/datasource/SqlDatasource.ts
index a26a4543749..e195c6f5a66 100644
--- a/public/app/features/plugins/sql/datasource/SqlDatasource.ts
+++ b/public/app/features/plugins/sql/datasource/SqlDatasource.ts
@@ -24,15 +24,16 @@ import { getTimeSrv } from 'app/features/dashboard/services/TimeSrv';
 
 import { VariableWithMultiSupport } from '../../../variables/types';
 import { getSearchFilterScopedVar, SearchFilterOptions } from '../../../variables/utils';
+import { SqlQueryEditor } from '../components/QueryEditor';
 import { MACRO_NAMES } from '../constants';
-import { DB, SQLQuery, SQLOptions, ResponseParser, SqlQueryModel, QueryFormat } from '../types';
+import { DB, SQLQuery, SQLOptions, SqlQueryModel, QueryFormat, ResponseParser } from '../types';
+import migrateAnnotation from '../utils/migration';
 
 export abstract class SqlDatasource extends DataSourceWithBackend<SQLQuery, SQLOptions> {
   id: number;
   name: string;
   interval: string;
   db: DB;
-  annotations = {};
 
   constructor(
     instanceSettings: DataSourceInstanceSettings<SQLOptions>,
@@ -44,6 +45,10 @@ export abstract class SqlDatasource extends DataSourceWithBackend<SQLQuery, SQLO
     const settingsData = instanceSettings.jsonData || {};
     this.interval = settingsData.timeInterval || '1m';
     this.db = this.getDB();
+    this.annotations = {
+      prepareAnnotation: migrateAnnotation,
+      QueryEditor: SqlQueryEditor,
+    };
   }
 
   abstract getDB(dsID?: number): DB;
diff --git a/public/app/features/plugins/sql/defaults.ts b/public/app/features/plugins/sql/defaults.ts
index cbd954bd3eb..e67a4128acb 100644
--- a/public/app/features/plugins/sql/defaults.ts
+++ b/public/app/features/plugins/sql/defaults.ts
@@ -1,4 +1,6 @@
-import { EditorMode, QueryFormat, SQLQuery } from './types';
+import { EditorMode } from '@grafana/experimental';
+
+import { QueryFormat, SQLQuery } from './types';
 import { createFunctionField, setGroupByField } from './utils/sql.utils';
 
 export function applyQueryDefaults(q?: SQLQuery): SQLQuery {
diff --git a/public/app/features/plugins/sql/types.ts b/public/app/features/plugins/sql/types.ts
index c3e1e55769b..2f630799d55 100644
--- a/public/app/features/plugins/sql/types.ts
+++ b/public/app/features/plugins/sql/types.ts
@@ -9,7 +9,7 @@ import {
   TimeRange,
   toOption as toOptionFromData,
 } from '@grafana/data';
-import { CompletionItemKind, LanguageCompletionProvider } from '@grafana/experimental';
+import { CompletionItemKind, EditorMode, LanguageCompletionProvider } from '@grafana/experimental';
 
 import { QueryWithDefaults } from './defaults';
 import {
@@ -49,11 +49,6 @@ export enum QueryFormat {
   Table = 'table',
 }
 
-export enum EditorMode {
-  Builder = 'builder',
-  Code = 'code',
-}
-
 export interface SQLQuery extends DataQuery {
   alias?: string;
   format?: QueryFormat;
diff --git a/public/app/features/plugins/sql/utils/migration.ts b/public/app/features/plugins/sql/utils/migration.ts
new file mode 100644
index 00000000000..0e39a7bbb1b
--- /dev/null
+++ b/public/app/features/plugins/sql/utils/migration.ts
@@ -0,0 +1,28 @@
+import { AnnotationQuery } from '@grafana/data';
+import { EditorMode } from '@grafana/experimental';
+
+import { SQLQuery } from '../types';
+
+export default function migrateAnnotation(annotation: AnnotationQuery<SQLQuery>) {
+  const oldQuery = typeof annotation.rawQuery === 'string' ? annotation.rawQuery : null;
+
+  if (!oldQuery) {
+    return annotation;
+  }
+
+  const newQuery: SQLQuery = {
+    ...(annotation.target ?? {}),
+    refId: annotation.target?.refId ?? 'Anno',
+    editorMode: EditorMode.Code,
+    rawSql: oldQuery,
+  };
+
+  return {
+    ...annotation,
+    rawQuery: undefined,
+    workspace: undefined,
+    subscription: undefined,
+    queryType: undefined,
+    target: newQuery,
+  };
+}